WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
4502
Andev.web
Abrir no Editor
Publique Seu Código
22 August 2025
Carrossel de cartas de leão 3D HTML CSS e JavaScript
21 October 2024
Regras de senha + alternar componentes da Web
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"; } });