WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Animation de défilement de parallaxe
5,676
Andev.web
Ouvrir dans l'éditeur
Publiez votre code
6
Recommandé
24 March 2025
Tableau de bord d'administration AdminHub v2.1
22 April 2025
Un code par andres.stahr
18 May 2025
Un code de BENE
HTML
Copy
Andev Web
CSS
Copy
body, html{ margin: 0; padding: 0; height: 100%; } /* Hide scrollbar for Chrome, Safari and Opera */ body::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ body { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } svg { display: block; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; } .scrollElement { position: absolute; height: 6000px; width: 100px; top: 0; z-index: 0; } .btn { position: fixed; bottom: 5%; right: 0px; transform: translateX(-50%); border: 1px solid #fff; border-radius: 5px; font-size: 0.9rem; padding: 0.5rem 0.7em; background-color: transparent; color: #ffffff; font-family: Verdana, Geneva, Tahoma, sans-serif; -webkit-font-smoothing: antialiased; cursor: pointer; transition: all .3s; z-index: 11; } .btn_works { left: 100px; right: unset; text-decoration: none; } .btn:hover { background: #ffffff; color: #1B1734; }
JS
Copy
gsap.registerPlugin(ScrollTrigger); let speed = 100; /* SCENE 1 */ let scene1 = gsap.timeline(); ScrollTrigger.create({ animation: scene1, trigger: ".scrollElement", start: "top top", end: "45% 100%", scrub: 3, }); // hills animation scene1.to("#h1-1", { y: 3 * speed, x: 1 * speed, scale: 0.9, ease: "power1.in" }, 0) scene1.to("#h1-2", { y: 2.6 * speed, x: -0.6 * speed, ease: "power1.in" }, 0) scene1.to("#h1-3", { y: 1.7 * speed, x: 1.2 * speed }, 0.03) scene1.to("#h1-4", { y: 3 * speed, x: 1 * speed }, 0.03) scene1.to("#h1-5", { y: 2 * speed, x: 1 * speed }, 0.03) scene1.to("#h1-6", { y: 2.3 * speed, x: -2.5 * speed }, 0) scene1.to("#h1-7", { y: 5 * speed, x: 1.6 * speed }, 0) scene1.to("#h1-8", { y: 3.5 * speed, x: 0.2 * speed }, 0) scene1.to("#h1-9", { y: 3.5 * speed, x: -0.2 * speed }, 0) //animate text scene1.to("#info", { y: 8 * speed }, 0) /* Bird */ gsap.fromTo("#bird", { opacity: 1 }, { y: -250, x: 800, ease: "power2.out", scrollTrigger: { trigger: ".scrollElement", start: "15% top", end: "60% 100%", scrub: 4, onEnter: function() { gsap.to("#bird", { scaleX: 1, rotation: 0 }) }, onLeave: function() { gsap.to("#bird", { scaleX: -1, rotation: -15 }) }, } }) /* Clouds */ let clouds = gsap.timeline(); ScrollTrigger.create({ animation: clouds, trigger: ".scrollElement", start: "top top", end: "70% 100%", scrub: 1, }); clouds.to("#cloud1", { x: 500 }, 0) clouds.to("#cloud2", { x: 1000 }, 0) clouds.to("#cloud3", { x: -1000 }, 0) clouds.to("#cloud4", { x: -700, y: 25 }, 0) /* Sun motion Animation */ let sun = gsap.timeline(); ScrollTrigger.create({ animation: sun, trigger: ".scrollElement", start: "top top", end: "2200 100%", scrub: 1, }); //sun motion sun.to("#bg_grad", { attr: { cy: "330" } }, 0.00) //bg change sun.to("#sun", { attr: { offset: "0.15" } }, 0.00) sun.to("#bg_grad stop:nth-child(2)", { attr: { offset: "0.15" } }, 0.00) sun.to("#bg_grad stop:nth-child(3)", { attr: { offset: "0.18" } }, 0.00) sun.to("#bg_grad stop:nth-child(4)", { attr: { offset: "0.25" } }, 0.00) sun.to("#bg_grad stop:nth-child(5)", { attr: { offset: "0.46" } }, 0.00) sun.to("#bg_grad stop:nth-child(6)", { attr: { "stop-color": "#FF9171" } }, 0) /* SCENE 2 */ let scene2 = gsap.timeline(); ScrollTrigger.create({ animation: scene2, trigger: ".scrollElement", start: "15% top", end: "40% 100%", scrub: 4, }); scene2.fromTo("#h2-1", { y: 500, opacity: 0 }, { y: 0, opacity: 1 }, 0) scene2.fromTo("#h2-2", { y: 500 }, { y: 0 }, 0.1) scene2.fromTo("#h2-3", { y: 700 }, { y: 0 }, 0.1) scene2.fromTo("#h2-4", { y: 700 }, { y: 0 }, 0.2) scene2.fromTo("#h2-5", { y: 800 }, { y: 0 }, 0.3) scene2.fromTo("#h2-6", { y: 900 }, { y: 0 }, 0.3) /* Bats */ gsap.fromTo("#bats", { opacity: 1, y: 400, scale: 0 }, { y: 120, scale: 0.8, transformOrigin: "50% 50%", ease: "power3.out", scrollTrigger: { trigger: ".scrollElement", start: "40% top", end: "70% 100%", scrub: 3, onEnter: function() { gsap.utils.toArray("#bats path").forEach((item, i) => { gsap.to(item, { scaleX: 0.5, yoyo: true, repeat: 11, duration: 0.15, delay: 0.7 + (i / 10), transformOrigin: "50% 50%" }) }); gsap.set("#bats", { opacity: 1 }) }, onLeave: function() { gsap.to("#bats", { opacity: 0, delay: 2 }) }, } }) /* Sun increase */ let sun2 = gsap.timeline(); ScrollTrigger.create({ animation: sun2, trigger: ".scrollElement", start: "2200 top", end: "5000 100%", scrub: 1, }); sun2.to("#sun", { attr: { offset: "0.6" } }, 0) sun2.to("#bg_grad stop:nth-child(2)", { attr: { offset: "0.7" } }, 0) sun2.to("#sun", { attr: { "stop-color": "#ffff00" } }, 0) sun2.to("#lg4 stop:nth-child(1)", { attr: { "stop-color": "#623951" } }, 0) sun2.to("#lg4 stop:nth-child(2)", { attr: { "stop-color": "#261F36" } }, 0) sun2.to("#bg_grad stop:nth-child(6)", { attr: { "stop-color": "#45224A" } }, 0) /* Transition (from Scene2 to Scene3) */ gsap.set("#scene3", { y: 580, visibility: "visible" }) let sceneTransition = gsap.timeline(); ScrollTrigger.create({ animation: sceneTransition, trigger: ".scrollElement", start: "70% top", end: "bottom 100%", scrub: 3, }); sceneTransition.to("#h2-1", { y: -680, scale: 1.5, transformOrigin: "50% 50%" }, 0) sceneTransition.to("#bg_grad", { attr: { cy: "-80" } }, 0.00) sceneTransition.to("#bg2", { y: 0 }, 0) /* Scene 3 */ let scene3 = gsap.timeline(); ScrollTrigger.create({ animation: scene3, trigger: ".scrollElement", start: "80% 50%", end: "bottom 100%", scrub: 3, }); //Hills motion scene3.fromTo("#h3-1", { y: 300 }, { y: -550 }, 0) scene3.fromTo("#h3-2", { y: 800 }, { y: -550 }, 0.03) scene3.fromTo("#h3-3", { y: 600 }, { y: -550 }, 0.06) scene3.fromTo("#h3-4", { y: 800 }, { y: -550 }, 0.09) scene3.fromTo("#h3-5", { y: 1000 }, { y: -550 }, 0.12) //stars scene3.fromTo("#stars", { opacity: 0 }, { opacity: 0.5, y: -500 }, 0) // Scroll Back text scene3.fromTo("#arrow2", { opacity: 0 }, { opacity: 0.7, y: -710 }, 0.25) scene3.fromTo("#text2", { opacity: 0 }, { opacity: 0.7, y: -710 }, 0.3) //gradient value change scene3.to("#bg2-grad", { attr: { cy: 600 } }, 0) scene3.to("#bg2-grad", { attr: { r: 500 } }, 0) /* falling star */ gsap.to("#fstar", { x: -700, y: -250, ease: "power4.out", scrollTrigger: { trigger: ".scrollElement", start: "4000 top", end: "6000 100%", scrub: 5, onEnter: function() { gsap.set("#fstar", { opacity: 1 }) }, onLeave: function() { gsap.set("#fstar", { opacity: 0 }) }, } }) //reset scrollbar position after refresh window.onbeforeunload = function() { window.scrollTo(0, 0); } let fullscreen; let fsEnter = document.getElementById('fullscr'); fsEnter.addEventListener('click', function (e) { e.preventDefault(); if (!fullscreen) { fullscreen = true; document.documentElement.requestFullscreen(); fsEnter.innerHTML = "Exit Fullscreen"; } else { fullscreen = false; document.exitFullscreen(); fsEnter.innerHTML = "Go Fullscreen"; } });