/*this code is used for background gradient*/ /*================================*/ /*==================================*/ #main-wrapper::after { content: ""; position: absolute; top:-50dvh; left: 50%; transform: translate(-50%); width: 100%; height: 100dvw; /* elliptical spotlight */ background: radial-gradient(at center center, #31D677 30%, #259B57 72%); background: radial-gradient( ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0) 50% ); pointer-events: none; } /* Tablet (768px – 1024px) */ @media (max-width: 1024px) { #main-wrapper::after { top: -30dvh; width: 120%; height: 120dvh; background: radial-gradient( ellipse at center, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0) 60% ); } } /* Mobile (up to 767px) */ @media (max-width: 767px) { #main-wrapper::after { left: 65%; top: -20dvh; width: 150%; height: 140dvh; background: radial-gradient( ellipse at center, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0) 70% ); } } /*end of gradient code */ /*===================*/ /*---------------------------------*/ .text-container { position: fixed; z-index: 9999; pointer-events: none; } .text-container button, .text-container a { pointer-events: auto; } document.addEventListener("DOMContentLoaded", function () { const gradients = [ "radial-gradient(at center center, #fd8941 35%, #ff751f 72%)", "radial-gradient(at center center, #051970 30%, #051970 72%)", "radial-gradient(at center center, #ffffff 30%, #ff751f 62%)", "radial-gradient(at center center, #ff751f 30%, #051970 72%)", ]; const smallest_scale = 0.5; // set all sections initially to scale(0.7) gsap.set("#img-container .section", { scale: smallest_scale }); const fullpageInstance = new fullpage("#img-container", { scrollingSpeed: 1000, autoScrolling: true, scrollHorizontally: true, navigation: false, // When section loads afterLoad: function (origin, destination) { // grow the loaded section gsap.to(destination.item, { scale: 1, duration: 0, ease: "power2.out" }); }, // Triggered when leaving a section onLeave: function (origin, destination, direction) { const toGradient = gradients[destination.index]; // Change background (instant switch between gradients) gsap.to("#main-wrapper", { backgroundImage: toGradient, duration: 0.5, ease: "none" }); // Shrink leaving section gsap.to(origin.item, { scale: smallest_scale, duration: 0.6, ease: "power2.out" }); // Grow entering section gsap.to(destination.item, { scale: 1, duration: 0.6, ease: "power2.out" }); } }); });