1function animateFrom(elem, direction) { 2 direction = direction || 1; 3 var x = 0, 4 y = direction * 100; 5 if (elem.classList.contains('gs_reveal_fromLeft')) { 6 x = -100; 7 y = 0; 8 } else if (elem.classList.contains('gs_reveal_fromRight')) { 9 x = 100; 10 y = 0; 11 } 12 elem.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; 13 elem.style.opacity = '0'; 14 gsap.fromTo( 15 elem, 16 { 17 x: x, 18 y: y, 19 autoAlpha: 0, 20 }, 21 { 22 duration: 5.25, 23 x: 0, 24 y: 0, 25 autoAlpha: 1, 26 ease: 'expo', 27 overwrite: 'auto', 28 }, 29 ); 30} 31 32function hide(elem) { 33 gsap.set(elem, { 34 autoAlpha: 0, 35 }); 36} 37 38function animazioneVideo() { 39 const revealContainers = gsap.utils.toArray('.reveal-video'); 40 gsap.set(revealContainers, { autoAlpha: 1 }); 41 42 revealContainers.forEach((container, i) => { 43 let image = container.querySelector('.reveal-image img'); 44 const tl = gsap.timeline({ 45 scrollTrigger: { 46 trigger: container, 47 toggleActions: 'restart none none reset', 48 }, 49 }); 50 51 tl.from([container, image], { 52 duration: 4, 53 xPercent: i % 2 === 0 ? gsap.utils.wrap([-100, 100]) : gsap.utils.wrap([100, -100]), 54 ease: 'power4', 55 }); 56 }); 57} 58 59// function for Modal position 60function getPosition(elem, target) { 61 var targetRect = target.getBoundingClientRect(); 62 var elemRect = elem.getBoundingClientRect(); 63 64 gsap.set(elem, { 65 x: 0, 66 y: 0, 67 width: targetRect.width, 68 height: targetRect.height, 69 }); 70 var newRect = elem.getBoundingClientRect(); 71 gsap.set(elem, { width: elemRect.width, height: elemRect.height }); 72 return { 73 left: targetRect.left - newRect.left, 74 top: targetRect.top - newRect.top, 75 width: newRect.width, 76 height: newRect.height, 77 }; 78} 79 80function infograficaBPA() { 81 // ENTER 82 83 jQuery("[data-shape-title='tracciato_girasole']").on('mouseover', function () { 84 jQuery("[data-colture='girasole']").css('z-index', '2'); 85 jQuery("[data-colture='placeholder']").css('z-index', '-1'); 86 jQuery("[data-shape-title='tracciato_girasole']").css('fill', 'rgba(255,255,255,0.5)'); 87 }); 88 89 jQuery("[data-shape-title='tracciato_grano_1']").on('mouseover', function () { 90 jQuery("[data-colture='grani']").css('z-index', '2'); 91 jQuery("[data-colture='placeholder']").css('z-index', '-1'); 92 jQuery("[data-shape-title='tracciato_grano_1']").css('fill', 'rgba(255,255,255,0.5)'); 93 jQuery("[data-shape-title='tracciato_grano_2']").css('fill', 'rgba(255,255,255,0.5)'); 94 jQuery("[data-shape-title='tracciato_grano_3']").css('fill', 'rgba(255,255,255,0.5)'); 95 }); 96 97 jQuery("[data-shape-title='tracciato_grano_2']").on('mouseover', function () { 98 jQuery("[data-colture='grani']").css('z-index', '2'); 99 jQuery("[data-colture='placeholder']").css('z-index', '-1'); 100 jQuery("[data-shape-title='tracciato_grano_1']").css('fill', 'rgba(255,255,255,0.5)'); 101 jQuery("[data-shape-title='tracciato_grano_2']").css('fill', 'rgba(255,255,255,0.5)'); 102 jQuery("[data-shape-title='tracciato_grano_3']").css('fill', 'rgba(255,255,255,0.5)'); 103 }); 104 105 jQuery("[data-shape-title='tracciato_grano_3']").on('mouseover', function () { 106 jQuery("[data-colture='grani']").css('z-index', '2'); 107 jQuery("[data-colture='placeholder']").css('z-index', '-1'); 108 jQuery("[data-shape-title='tracciato_grano_1']").css('fill', 'rgba(255,255,255,0.5)'); 109 jQuery("[data-shape-title='tracciato_grano_2']").css('fill', 'rgba(255,255,255,0.5)'); 110 jQuery("[data-shape-title='tracciato_grano_3']").css('fill', 'rgba(255,255,255,0.5)'); 111 }); 112 113 jQuery("[data-shape-title='tracciato_leguminose']").on('mouseover', function () { 114 jQuery("[data-colture='leguminose']").css('z-index', '2'); 115 jQuery("[data-colture='placeholder']").css('z-index', '-1'); 116 jQuery("[data-shape-title='tracciato_leguminose']").css('fill', 'rgba(255,255,255,0.5)'); 117 jQuery("[data-shape-title='tracciato_leguminose_2']").css('fill', 'rgba(255,255,255,0.5)'); 118 }); 119 120 jQuery("[data-shape-title='tracciato_leguminose_2']").on('mouseover', function () { 121 jQuery("[data-colture='leguminose']").css('z-index', '2'); 122 jQuery("[data-colture='placeholder']").css('z-index', '-1'); 123 jQuery("[data-shape-title='tracciato_leguminose']").css('fill', 'rgba(255,255,255,0.5)'); 124 jQuery("[data-shape-title='tracciato_leguminose_2']").css('fill', 'rgba(255,255,255,0.5)'); 125 }); 126 127 jQuery("[data-shape-title='tracciato_crops']").on('mouseover', function () { 128 jQuery("[data-colture='crops']").css('z-index', '2'); 129 jQuery("[data-colture='placeholder']").css('z-index', '-1'); 130 jQuery("[data-shape-title='tracciato_crops']").css('fill', 'rgba(255,255,255,0.5)'); 131 }); 132 133 // LEAVE 134 135 jQuery("[data-shape-title='tracciato_girasole']").on('mouseleave', function () { 136 jQuery("[data-colture='girasole']").css('z-index', '1'); 137 jQuery("[data-colture='placeholder']").css('z-index', '1'); 138 jQuery("[data-shape-title='tracciato_girasole']").css('fill', 'rgba(0,0,0,0)'); 139 }); 140 141 jQuery("[data-shape-title='tracciato_grano_1']").on('mouseleave', function () { 142 jQuery("[data-colture='grani']").css('z-index', '1'); 143 jQuery("[data-colture='placeholder']").css('z-index', '1'); 144 jQuery("[data-shape-title='tracciato_grano_1']").css('fill', 'rgba(0,0,0,0)'); 145 jQuery("[data-shape-title='tracciato_grano_2']").css('fill', 'rgba(0,0,0,0)'); 146 jQuery("[data-shape-title='tracciato_grano_3']").css('fill', 'rgba(0,0,0,0)'); 147 }); 148 149 jQuery("[data-shape-title='tracciato_grano_2']").on('mouseleave', function () { 150 jQuery("[data-colture='grani']").css('z-index', '1'); 151 jQuery("[data-colture='placeholder']").css('z-index', '1'); 152 jQuery("[data-shape-title='tracciato_grano_1']").css('fill', 'rgba(0,0,0,0)'); 153 jQuery("[data-shape-title='tracciato_grano_2']").css('fill', 'rgba(0,0,0,0)'); 154 jQuery("[data-shape-title='tracciato_grano_3']").css('fill', 'rgba(0,0,0,0)'); 155 }); 156 157 jQuery("[data-shape-title='tracciato_grano_3']").on('mouseleave', function () { 158 jQuery("[data-colture='grani']").css('z-index', '1'); 159 jQuery("[data-colture='placeholder']").css('z-index', '1'); 160 jQuery("[data-shape-title='tracciato_grano_1']").css('fill', 'rgba(0,0,0,0)'); 161 jQuery("[data-shape-title='tracciato_grano_2']").css('fill', 'rgba(0,0,0,0)'); 162 jQuery("[data-shape-title='tracciato_grano_3']").css('fill', 'rgba(0,0,0,0)'); 163 }); 164 165 jQuery("[data-shape-title='tracciato_leguminose']").on('mouseleave', function () { 166 jQuery("[data-colture='leguminose']").css('z-index', '1'); 167 jQuery("[data-colture='placeholder']").css('z-index', '1'); 168 jQuery("[data-shape-title='tracciato_leguminose']").css('fill', 'rgba(0,0,0,0)'); 169 jQuery("[data-shape-title='tracciato_leguminose_2']").css('fill', 'rgba(0,0,0,0)'); 170 }); 171 172 jQuery("[data-shape-title='tracciato_leguminose_2']").on('mouseleave', function () { 173 jQuery("[data-colture='leguminose']").css('z-index', '1'); 174 jQuery("[data-colture='placeholder']").css('z-index', '1'); 175 jQuery("[data-shape-title='tracciato_leguminose']").css('fill', 'rgba(0,0,0,0)'); 176 jQuery("[data-shape-title='tracciato_leguminose_2']").css('fill', 'rgba(0,0,0,0)'); 177 }); 178 179 jQuery("[data-shape-title='tracciato_crops']").on('mouseleave', function () { 180 jQuery("[data-colture='crops']").css('z-index', '1'); 181 jQuery("[data-colture='placeholder']").css('z-index', '1'); 182 jQuery("[data-shape-title='tracciato_crops']").css('fill', 'rgba(0,0,0,0)'); 183 }); 184} 185 186function menuInitialize() {
187 var toggles = document.querySelectorAll('.c-hamburger'); 188 189 for (var i = toggles.length - 1; i >= 0; i--) { 190 var toggle = toggles[i]; 191 toggleHandler(toggle); 192 } 193 194 function toggleHandler(toggle) { 195 toggle.addEventListener('click', function (e) { 196 e.preventDefault(); 197 if (this.classList.contains('is-active') === true) { 198 this.classList.remove('is-active'); 199 jQuery('.open').removeClass('opened'); 200 jQuery('.overlay').removeClass('enabled'); 201 jQuery('html').removeClass('lock-position'); 202 } else { 203 this.classList.add('is-active'); 204 jQuery('.open').addClass('opened'); 205 jQuery('html').addClass('lock-position'); 206 jQuery('.overlay').addClass('enabled'); 207 } 208 }); 209 } 210 211 jQuery('.menu-slide li a').click(function (event) { 212 jQuery('.open').removeClass('opened'); 213 jQuery('.c-hamburger').removeClass('is-active'); 214 jQuery('html').removeClass('lock-position'); 215 jQuery('.overlay').removeClass('enabled'); 216 }); 217} 218 219gsap.registerPlugin(ScrollTrigger); 220 221const asscroll = new ASScroll.default( 222 (options = { 223 element: '.asscroll-container', 224 ease: '0.085', 225 }), 226); 227 228ScrollTrigger.defaults({ 229 scroller: asscroll.Scroll.scrollContainer, 230}); 231 232ScrollTrigger.scrollerProxy(asscroll.Scroll.scrollContainer, { 233 scrollTop(value) { 234 return arguments.length ? asscroll.scrollTo(value) : -asscroll.smoothScrollPos; 235 }, 236 getBoundingClientRect() { 237 return { 238 top: 0, 239 left: 0, 240 width: window.innerWidth, 241 height: window.innerHeight, 242 }; 243 }, 244}); 245 246asscroll.on('raf', ScrollTrigger.update); 247 248window.addEventListener('resize', () => { 249 asscroll.onResize(window.innerWidth, window.innerHeight); 250}); 251 252ScrollTrigger.addEventListener('refresh', () => asscroll.onResize()); 253 254// function for transitions 255function gsapTransizioni() { 256 /* HAMBURGER MENU */ 257 menuInitialize(); 258 259 infograficaBPA(); 260 261 animazioneVideo(); 262 263if (jQuery(window).width() > 1199) { 264 265gsap.set('.circle-arrow',{xPercent:-50,yPercent:-50,opacity: 0}); 266 267var freccia = document.querySelector('.circle-arrow'); 268 269 270 document.querySelectorAll('.owl-carousel').forEach((item) => { 271 item.addEventListener('mousemove',e => { 272 gsap.to(freccia,0.7,{x:e.clientX,y:e.clientY}); 273 }); 274 275 item.addEventListener('mouseenter',e => { 276 gsap.to(freccia,0.7,{opacity: 1,scale: 1,display:"block"}); 277 }); 278 }) 279 280 document.querySelectorAll('.owl-carousel').forEach((item) => { 281 item.addEventListener('mouseleave',e => { 282 gsap.to(freccia,0.7,{opacity: 0,scale: 0,display:"none"}); 283 }); 284 }) 285 286} 287 288 289 /* MODAL 1 */ 290 var modalButton = document.getElementById('modalButton'); 291 var modalOverlay = document.querySelector('.modalOverlay'); 292 var modal = document.querySelector('.messageWrapper'); 293 294 if (modalButton && modalOverlay) { 295 gsap.set([modalOverlay, modal], { autoAlpha: 0 }); 296 modalButton.addEventListener('click', function () { 297 298 // per girare il popup nel mobile entro in fullscreen e giro schermo 299 // if (window.innerWidth < 768) { 300 // document.body.requestFullscreen().then(res=>console.log(res)).catch(err=>console.log(err)); 301 // screen.orientation.lock('landscape').then(res=>console.log(res)).catch(err=>console.log(err)); 302 // } 303 304 305 var newRect = getPosition(modal, modalButton); 306 gsap.set(modal, { 307 x: 0, 308 y: -newRect.top, 309 width: newRect.width, 310 height: newRect.height, 311 }); 312 313 var tl = gsap.timeline(); 314 tl.to(modalOverlay, 0.5, { autoAlpha: 0.75 }); 315 tl.to(modal, 0.5, { 316 x: 0, 317 y: 0, 318 width: 800, 319 height: 400, 320 autoAlpha: 1, 321 }); 322 323 /* effetto lottie animazione popup grano */ 324 let player = document.querySelector("lottie-player"); 325 setTimeout(function(){ 326 player.play(); 327 }, 800); 328 329 330 }); 331 332 [document.querySelector('.phase-close'), modalOverlay].forEach(function (element) { 333 element.addEventListener('click', function () { 334 var newRect = getPosition(modal, modalButton); 335 var tl = gsap.timeline(); 336 337 tl.to(modal, 0.5, { 338 autoAlpha: 0, 339 x: 0, 340 y: -newRect.top, 341 height: newRect.height, 342 width: newRect.width, 343 }); 344 tl.to('.modalOverlay', 0.5, { autoAlpha: 0 }); 345 346 // if (window.innerWidth < 768) { // setto orientamento verticale ed esco dal fullscree dopo timeout se non mostra barra indirizzi 347 // screen.orientation.lock('portrait').then(res=>console.log(res)).catch(err=>console.log(err)); 348 // setTimeout(() => document.exitFullscreen(), 500); 349 // } 350 351 /* effetto lottie animazione popup grano stop */ 352 let player = document.querySelector("lottie-player"); 353 player.stop(); 354 355 }); 356 }); 357 } 358 359 asscroll.onResize(window.innerWidth, window.innerHeight); 360 361 //const totalScroll = document.querySelector('.asscroll-container').scrollHeight - innerHe
361ight; 362 363 if (jQuery(window).width() > 768) { 364 var videoIniziale = gsap.timeline({ 365 scrollTrigger: { 366 pin: false, 367 scrub: true, 368 trigger: '.page-video', 369 start: () => 'top top', 370 }, 371 }); 372 videoIniziale.fromTo('.page-video', { alpha: 1, scale: 1, yPercent: 0 }, { alpha: 1, scale: 0.5, yPercent: 10 }); 373 } 374 375 gsap.to('.back-to', { 376 opacity: '1', 377 duration: 1.5, 378 ease: 'power3.inOut', 379 scrollTrigger: { 380 trigger: '.page-video', 381 start: '700', 382 end: '700', 383 pin: false, 384 scrub: 1, 385 markers: false, 386 }, 387 }); 388 389 gsap.to('.ad-menu-header.fisso', { 390 opacity: '1', 391 duration: 1.5, 392 ease: 'power3.inOut', 393 scrollTrigger: { 394 trigger: '.page-video', 395 start: '700', 396 end: '700', 397 pin: false, 398 scrub: 1, 399 markers: false, 400 }, 401 }); 402 403 document.querySelector('.back-to-link').addEventListener('click', function () { 404 asscroll.scrollTo(0, 0); 405 }); 406 407 /* IMMAGINI CHE APPAIONO */ 408 gsap.utils.toArray('.gs_reveal').forEach(function (elem) { 409 hide(elem); // assure that the element is hidden when scrolled into view 410 ScrollTrigger.create({ 411 trigger: elem, 412 onEnter: function () { 413 animateFrom(elem); 414 }, 415 onEnterBack: function () { 416 animateFrom(elem, -1); 417 }, 418 onLeave: function () { 419 hide(elem); 420 }, // assure that the element is hidden when scrolled into view 421 }); 422 }); 423 424 /* **** 425 ANIMAZIONI 426 **** */ 427 428 const section_0 = '.full-container'; 429 430 gsap.to('.full-container', { 431 y: 150, 432 ease: 'none', 433 scrollTrigger: { 434 trigger: section_0, 435 scrub: true, 436 }, 437 }); 438 439 gsap.to('.full-container .section-title', { 440 y: -150, 441 ease: 'none', 442 scrollTrigger: { 443 trigger: section_0, 444 scrub: true, 445 }, 446 }); 447 448 gsap.to('.full-container .video-container-parallax', { 449 y: -150, 450 ease: 'none', 451 scrollTrigger: { 452 trigger: section_0, 453 scrub: true, 454 }, 455 }); 456 gsap.to('.full-container .button-link-content', { 457 y: -150, 458 ease: 'none', 459 scrollTrigger: { 460 trigger: section_0, 461 scrub: true, 462 }, 463 }); 464 465 const section_1 = '.quaderno-container'; 466 467 gsap.to('.desktop.quaderno-1', { 468 yPercent: 35, 469 ease: 'none', 470 scrollTrigger: { 471 trigger: section_1, 472 scrub: true, 473 }, 474 }); 475 gsap.to('.desktop.quaderno-2', { 476 yPercent: -25, 477 ease: 'none', 478 scrollTrigger: { 479 trigger: section_1, 480 scrub: true, 481 }, 482 }); 483 gsap.to('.desktop.quaderno-3', { 484 yPercent: 25, 485 ease: 'none', 486 scrollTrigger: { 487 trigger: section_1, 488 scrub: true, 489 }, 490 }); 491 gsap.to('.desktop.quaderno-4', { 492 yPercent: -10, 493 ease: 'none', 494 scrollTrigger: { 495 trigger: section_1, 496 scrub: true, 497 }, 498 }); 499 500 const section_1_mobile = '.quaderno-container'; 501 gsap.to('.mobile.quaderno-1', { 502 yPercent: 35, 503 ease: 'none', 504 scrollTrigger: { 505 trigger: section_1_mobile, 506 scrub: true, 507 }, 508 }); 509 gsap.to('.mobile.quaderno-2', { 510 yPercent: -25, 511 ease: 'none', 512 scrollTrigger: { 513 trigger: section_1_mobile, 514 scrub: true, 515 }, 516 }); 517 gsap.to('.mobile.quaderno-3', { 518 yPercent: 25, 519 ease: 'none', 520 scrollTrigger: { 521 trigger: section_1_mobile, 522 scrub: true, 523 }, 524 }); 525 gsap.to('.mobile.quaderno-4', { 526 yPercent: -10, 527 ease: 'none', 528 scrollTrigger: { 529 trigger: section_1_mobile, 530 scrub: true, 531 }, 532 }); 533 534 asscroll.enable({ 535 ease: '0.085', 536 customScrollbar: false, 537 }); 538} 539 540window.addEventListener('load', () => { 541 gsapTransizioni(); 542});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.