Experience immersive avec effets de zoom au scroll et animations parallax.
L'image de fond zoome de scale(1) a scale(3) au scroll pendant que le texte s'estompe. Cree un effet cinematographique qui plonge le visiteur dans l'experience.
transform: scale(lerp(1, 3, progress)) via JS scroll Explorer Scroll & Parallax →Un conteneur de 300x400px s'agrandit progressivement pour remplir l'ecran. La bordure arrondie disparait, revelant l'image en plein ecran avec du texte superpose.
width/height lerp + borderRadius lerp(20, 0) Explorer Scroll & Parallax →Un cercle de 100px s'expanse jusqu'a remplir l'ecran, revelant une image cachee. Transition spectaculaire qui donne l'impression d'entrer dans la scene.
width/height lerp(100, fullscreen) + border-radius 50% → 0 Explorer Transitions →Le mot grossit de scale(1) a scale(8) au scroll avec un fondu in-out. L'utilisateur a l'impression de traverser le texte, creant un moment memorable.
transform: scale(lerp(1, 8)) + opacity fade Explorer Scroll & Parallax →Les images bougent en parallaxe au scroll tandis que le contenu texte monte au hover. Double interaction (scroll + hover) qui rend la galerie vivante.
translateY(scrollPercent * 40px) + hover scale(1.1) Explorer Scroll & Parallax →Les cartes passent de scale(0.9) opaque 50% a scale(1) pleine opacite quand elles entrent dans le viewport. Transition avec cubic-bezier elastique pour plus de caractere.
transform: scale(0.9 → 1) + cubic-bezier(0.16, 1, 0.3, 1) Explorer Transitions →Le contenu CTA passe de scale(0.8) invisible a scale(1) visible au scroll. Le titre utilise un gradient text blanc-violet pour conclure avec impact.
transform: scale(0.8 → 1) + opacity 0 → 1 Explorer Scroll & Parallax →