Partage

Animation au scroll

Animation au scroll effet ouverture de porte

2 janvier 2018 à 17:19:05

Bonsoir à tous,

Comment réaliser cette animation au scroll : http://www.cupcuff.ca. Je parle de l'animation de la porte qui s'ouvre en faisant apparaître une autre page derrière. J'ai essayé AOS, ScrollReveal, mais je n'obtiens pas le rendu souhaité. Il doit surement y avoir une possibilité en CSS3... Merci pour votre aide.

Voici les deux images que je souhaite animer :

2 janvier 2018 à 17:26:42

Salut,

C'est assez simple, il suffit de regarder le code du site que tu donnes en exemple :

1) Une image de fond,

2) Deux divs fixes faisant chacune 50% de la largeur du viewport et qui contiennent chacune l'image d'une porte,

3) Du javascript pour déplacer les deux divs en fonction du scroll.

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
2 janvier 2018 à 17:35:13

Bonjour, visiblement le site utilise le plugin skrollr.js pour faire ça, une petite recherche sur le web devrait te permettre de trouver facilement le plug.

2 janvier 2018 à 17:54:51

Mewen_bzh a écrit:

3) Du javascript pour déplacer les deux divs en fonction du scroll.

Merci, mais justement c'est le javascript que je cherche à comprendre, où bien son équivalent en CSS... Le fonctionnement je l'ai saisi.



Animation au scroll

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown