WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ne jamais abandonner
1410
Andev.web
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
23 May 2025
Spotify connecté
25 April 2023
Formulaire de connexion responsive
23 March 2024
Page de connexion HTML
HTML
Copy
Andev Web
#
NEVER
GIVE
UP!
Replay animation
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap"); * { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; place-items: center; place-content: center; grid-template-areas: "body"; background: #27052d; color: white; overflow: hidden; } body::before { --size: 150vmax; --bg-size: 50%; content: ""; grid-area: body; width: var(--size); height: var(--size); opacity: var(--pattern-opacity, 1); background-color: blue; background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='hotpink' %3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: var(--bg-size); background-repeat: repeat; -webkit-animation: var(--pattern-animation, pattern 20s linear infinite); animation: var(--pattern-animation, pattern 20s linear infinite); } h1 { grid-area: body; position: relative; display: flex; align-items: center; font-family: "Outfit", sans-serif; font-size: calc(1rem + 15vmin); line-height: 0.9; text-transform: uppercase; mix-blend-mode: difference; } h1 span { display: block; } button { display: none; cursor: pointer; position: fixed; bottom: 5vh; left: 0; right: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; padding: 0.75rem 1.5rem; font-family: system-ui, sans-serif; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: blue; background: white; border: 1px solid transparent; border-radius: 360px; box-shadow: 0 6px 6px -3px hsla(0 0% 0% / 0.1); } @-webkit-keyframes pattern { to { background-position: calc(var(--size) * -1) calc(var(--size) * -1); } } @keyframes pattern { to { background-position: calc(var(--size) * -1) calc(var(--size) * -1); } } @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { body { --pattern-opacity: 0; } h1 { opacity: 0; } } @media (scripting: none), (prefers-reduced-motion) { h1 { display: flex; flex-direction: column; } .hash { display: none; } } @media (prefers-reduced-motion) { body { --pattern-animation: none; } }
JS
Copy
let btn = document.querySelector("button"); let heading = document.querySelector("h1"); let words = heading.querySelectorAll(".word"); let hash = heading.querySelector(".hash"); let reducedMotion = window.matchMedia("(prefers-reduced-motion)").matches; if (!reducedMotion) { let tl = gsap.timeline(); btn.addEventListener("click", () => { tl.restart(); }); tl.set(heading, { scale: 0.25, opacity: 0 }) .to(heading, { scale: 0.4, opacity: 1, duration: 0.7, ease: "power4.out" }) .to( hash, { scale: 0, duration: 0.4, ease: "back.in(1.6)" }, "-=0.2" ) .to(words[0], { xPercent: -20, duration: 0.8, ease: "elastic.out(0.7, 0.2)" }) .to( words[1], { xPercent: -20, duration: 0.8, ease: "elastic.out(0.7, 0.2)" }, "<" ) .to( words[2], { xPercent: 5, duration: 0.8, ease: "elastic.out(0.7, 0.2)" }, "<" ) .to( heading, { scale: 1.001, y: 0, duration: 0.5, ease: "back.in(1.5)" }, "-=0.3" ) .to( words[1], { scaleX: 1.8, scaleY: 2.2, duration: 0.4, ease: "expo.inOut" }, "<+=0.1" ) .to( words[0], { yPercent: -150, xPercent: 40, duration: 0.3, ease: "power4.out" }, "<" ) .to( words[1], { xPercent: -70, duration: 0.3, ease: "power4.out" }, "<" ) .to( words[2], { yPercent: 150, xPercent: -110, duration: 0.3, ease: "power4.out" }, "<" ) .to( heading, { scale: 1.1, duration: 0.3, ease: "power4.out" }, "-=0.2" ) .to(heading, { scale: 1, duration: 0.3, ease: "power4.out" }) .to( words[0], { yPercent: -100, xPercent: 40, duration: 0.6, ease: "elastic.out(0.6,0.2)" }, "<" ) .to( words[1], { scale: 1, duration: 0.6, ease: "elastic.out(0.6,0.2)" }, "<" ) .to( words[2], { yPercent: 100, duration: 0.6, ease: "elastic.out(0.6,0.2)" }, "<" ) .to( document.body, { "--pattern-opacity": 1, duration: 0.1 }, "<" ) .set(btn, { display: "block" }) .fromTo( btn, { scale: 0.8 }, { scale: 1, opacity: 1, duration: 0.4, ease: "power4.out" } ); }