Bonjour à tous,
Je me demande s’il existe un moyen d’obtenir cet effet lors du défilement en utilisant uniquement CSS?
DéfilementMagie
La bibliothèque javascript pour les interactions de défilement magiques. ScrollMagic vous aide à réagir facilement à la position de défilement actuelle de l’utilisateur.
J’aime vraiment la façon dont le chapeau défile hors de vue, puis chaque lettre change de taille. Je suppose que je peux faire le dimensionnement des lettres avec des images clés, mais je ne sais pas comment je le fais lorsque la page défile pour chaque lettre.
Des idées sur la meilleure façon de faire cela?
Je me demande s’il existe un moyen d’obtenir cet effet lors du défilement en utilisant uniquement CSS?
L’animation peut être réalisée en CSS, mais vous devez déclencher js et interagir avec l’animation en fonction du défilement de la page. Cela ne peut pas être fait en CSS seul, sauf si vous le vouliez simplement comme une animation autonome non basée sur le défilement.
Voici une démo simple où j’ai emprunté la plupart des js de Astuces CSS juste pour tester.
Évidemment, plus vous ajoutez d’animation, plus cela devient complexe, donc si vous voulez toutes les cloches et sifflets, vous êtes mieux avec le plugin prêt à l’emploi que vous avez trouvé (ou des similaires).
1 J’aime
Comme la position de chaque lettre dépend totalement de la position de défilement sans aucune synchronisation, l’animation des lettres ne peut être que 100% javascript. Il en va de même pour la position du chapeau haut de forme, la position de la baguette magique et l’angle de la baguette magique.
L’oscillation du chapeau haut de forme est effectuée par JavaScript, mais cela pourrait être fait par l’animation d’images clés CSS.
2 J’aime
Merci pour les réponses et l’exemple @PaulOB Je vais jouer avec ça.
Savez-vous si cet effet porte un nom ?
1 J’aime
Savez-vous si cet effet porte un nom ?
Je ne sais pas s’il existe un nom spécifique pour cela, mais je l’appelle généralement des animations de défilement.
Il y en a beaucoup d’autres qui font toutes sortes d’animations comme celle-ci.
Animer.css | Une bibliothèque multi-navigateurs d’animations CSS.
Animate.css est une bibliothèque d’animations multi-navigateurs prêtes à l’emploi que vous pouvez utiliser dans vos projets. Idéal pour l’emphase, les pages d’accueil, les curseurs et les conseils d’attention.
Ou pour un travail à part entière, quelque chose comme ça peut-être.
GreenSock
GSAP est une bibliothèque d’animation JavaScript standard de GreenSock qui vous permet de créer des animations hautes performances qui fonctionnent dans tous les principaux navigateurs.
Tout dépend de ce que vous voulez accomplir. S’il ne s’agit que d’une petite animation unique, écrivez-la vous-même, mais il s’agit d’une série d’animations complexes, alors l’un de ces outils serait utile, mais bien sûr, il y a des courbes d’apprentissage abruptes,
1 J’aime
— to www.sitepoint.com
Jeu de briques
Snake
Pacman
Bubble