Création d'animations basées sur Scroll à l'aide de jQuery et CSS3

Créer un mouvement est un excellent moyen de fournir une expérience intéressante et interactive à vos téléspectateurs. Les sites modernes offrant une plus grande interactivité, il devient de plus en plus prévu que même des sites Web simples offriront un certain niveau d'animation / mouvement pour engager leurs visiteurs.

Aujourd'hui, je décrirai une technique que vous pouvez adapter à vos projets Web - déclencher des animations lorsque vous faites défiler dans une région prédéfinie. Ces animations seront créées à l'aide de transitions CSS et CSS. Nous utiliserons également jQuery pour détecter quand les éléments sont visibles et pour ajouter / supprimer les classes appropriées.

Pour ceux qui veulent en voir des exemples en action, vous pouvez sauter directement aux démos.

Les plats clés

• Les animations basées sur Scroll peuvent être créées à l'aide de JQuery et CSS3, offrant une expérience interactive aux téléspectateurs. Ces animations sont déclenchées lorsqu'un utilisateur défile dans une région prédéfinie, ce qui les rend plus attrayants et visuellement attrayants.
• La technique consiste à utiliser les transitions CSS Transforts et CSS, avec jQuery utilisé pour détecter quand les éléments sont visibles et pour ajouter / supprimer les classes appropriées. Les considérations pour cette approche incluent la compatibilité et la vitesse du navigateur, avec des navigateurs modernes prenant en charge les transformations 2D et 3D pour les animations lisses.
• Le processus consiste à détecter les éléments d'animation en vue, à s'accrocher à l'événement de défilement, à gérer le redimensionnement et à calculer la hauteur et la largeur des éléments. Les animations peuvent être déclenchées lorsqu'un élément se trouve dans la fenêtre, permettant à des transformations ou des effets supplémentaires d'être enchaînés pour les interfaces interactives.
• Les exemples d'animation de défilement incluent le glissement dans les éléments de la gauche, les éléments décolorés de bas vers le haut et l'animation rebondissante en plusieurs étapes. Ces techniques peuvent être adaptées à divers projets Web, tels que l'affichage des profils du personnel ou des informations de cours.

Pourquoi déclencher des animations sur Scroll?

La principale raison pour laquelle nous voudrions déclencher des animations sur défilement, est qu'ils s'activent tout comme l'utilisateur défile un élément en vue.

Nous pourrions vouloir décolorer des éléments ou fournir une transformation intéressante et celles-ci n'auraient du sens que lorsque l'utilisateur peut réellement les visualiser.

Animer avec CSS ou avec jQuery?

Il y a des avantages et des inconvénients à chaque approche. JQuery (Read JavaScript) vous permet d'animer des choses que CSS ne fait pas (comme la position de défilement, ou les attributs d'un élément), tandis que les animations CSS peuvent être très attrayantes pour les développeurs qui préfèrent mettre toute leur logique d'animation et de présentation dans le CSS couche.

J'utiliserai des transformations via CSS, mais il existe toujours des variables à considérer en fonction de votre situation. Je prendrais compte des facteurs suivants:

Compatibilité du navigateur

Étant donné que notre solution sera basée sur des transformations, notre compatibilité du navigateur sera limitée à celles qui prennent en charge les transformations 2D ou les transformations 3D.

Tous les navigateurs modernes prendront en charge les transformations 3D et plusieurs des anciens navigateurs hérités tels que Internet Explorer 9 et Opera 11.5 prendront en charge les transformations 2D. La prise en charge globale des navigateurs de bureau et mobile est complète.

La méthode Animate de JQuery fonctionne dans n'importe quel navigateur (sain d'esprit), à condition que vous utilisiez la version 1.x de la bibliothèque. JQUERY 2.X a supprimé le support pour IE8 et ci-dessous, alors n'utilisez-le que si vous n'avez pas besoin de prendre en charge les navigateurs hérités (chanceux!).

Speed ​​

Nous voulons des animations rapides et lisses, surtout en ce qui concerne les appareils mobiles. En tant que tel, il est toujours préférable d'utiliser des transitions et des transformations dans la mesure du possible.

Les exemples utiliseront des transformations 3D avec des frappes 2D pour les navigateurs plus anciens. Nous voulons forcer l'accélération du matériel pour la vitesse, donc une transformation 3D est un must (nous utiliserons Translate3D avec d'autres fonctions qui provoquent un rendu accéléré GPU).

La méthode Animate de JQuery est considérablement plus lente qu'une transformation assistée par GPU, nous allons donc utiliser jQuery pour notre manipulation / calculs d'événements, pas pour notre animation elle-même (comme nous voulons qu'ils soient aussi lisses que possible).

Note latérale

Nous savons tous que jQuery! == JavaScript, non? Eh bien, il s'avère que l'utilisation de Vanilla JS pour les animations n'est peut-être pas une si mauvaise idée après tout. Bien que cela dépasse la portée de ce tutoriel, voici deux excellents articles sur le sujet pour ceux qui souhaitent en savoir plus:

• CSS vs JS Animation: quel est plus rapide?
• Mythe Busting: CSS Animations vs JavaScript

maintenant de retour au spectacle…

Détection des éléments d'animation en vue

Le point global de cette technique consiste à examiner tous nos éléments que nous avons marqués comme animation et à déterminer s'ils sont actuellement dans la fenêtre. Examinons comment nous allons y parvenir:

Sélecteur Caching

Le défilement est une entreprise coûteuse. Si vous joignez un écouteur d'événements à l'événement Scroll, il se déclenchera plusieurs fois chaque fois qu'un utilisateur défile la page. Comme nous appellerons nos fonctions de dimension / calcul chaque fois qu'un utilisateur défile, c'est une bonne idée de stocker les éléments renvoyés par nos sélecteurs en variables. Ceci est connu comme la mise en cache des sélecteurs et nous évite d'interroger le dom encore et encore.

Dans notre script, nous référendrons à la fois l'objet de fenêtre et la collection d'éléments que nous voulons animer.

<span>//Cache reference to window and animation items
</span><span>var $animation_elements = $('.animation-element');
</span><span>var $window = $(window);</span>

Remarquez le signe du dollar devant les variables. Il s'agit d'une convention pour indiquer qu'ils détiennent un objet jQuery, ou une collection d'objets.

accrochez-vous à l'événement de défilement

Ensuite, nous créons notre gestionnaire d'événements qui écoute l'événement de défilement. Cela tirera lorsque nous faisons défiler la page. Nous lui transmettons une référence à notre fonction Check_IF_IN_VIVE (à laquelle nous allons arriver dans une minute). Chaque fois que l'événement de défilement est tiré, cette fonction sera exécutée.

<span>//Cache reference to window and animation items
</span><span>var $animation_elements = $('.animation-element');
</span><span>var $window = $(window);</span>

Gestion de redimensionnement

Parce que nous calculons les hauteurs et les largeurs, nous devons prendre en compte les changements d'orientation avec le redimensionnement général.

Nous pouvons mettre à jour notre gestionnaire d'événements pour écouter les événements de défilement et de redimensionnement. Cela permettra à notre fonction de détection de fonctionner lorsque nous redimensions ou changeons l'orientation.

$<span>window.on('scroll', check_if_in_view);</span>

De plus, nous utilisons également la méthode de déclenchement jQuery pour déclencher un événement de défilement dès que le DOM est prêt. Nous le faisons afin que si l'un des éléments qui devraient être animés se trouvent dans la fenêtre, ils seront détectés comme en vue et l'animation appliquée comme si nous avions fait défiler.

$<span>window.on('scroll resize', check_if_in_view);</span>

Détection de position de défilement

La partie de détection réelle de cet exemple provient du script suivant.

$<span>window.trigger('scroll');</span>

Permet de décomposer ce qui se passe ici.

La fonction Check_IF_IN_VIVE est appelée initialement lorsque le DOM est prêt, puis chaque fois que nous redimensions ou défions.

Nous obtenons la hauteur actuelle de la fenêtre, ainsi que sa position supérieure et inférieure afin que nous sachions quelle zone nous regardons.

Nous passons et recherchons tous les éléments qui seront animés (enregistrés dans la variable $ animation_elements). Pour chacun de ces éléments, nous recueillons sa hauteur avec sa position supérieure et inférieure (nous savons donc où il vit sur la page).

Nous comparons chaque élément pour voir si sa position inférieure est supérieure à la position supérieure de la fenêtre, mais aussi que la position supérieure de l'élément est inférieure à la position inférieure de la fenêtre.

Voici un exemple visuel

Calcul de la hauteur et de la largeur

Dans notre fonction de détection, nous devons obtenir les hauteurs et les positions de divers éléments pour calculer correctement les choses, c'est là que nous avons utilisé les fonctions de hauteur de JQuery. Il est important d'avoir une rupture de la façon dont ces fonctions de hauteur fonctionnent

height () et width ()

Les fonctions de hauteur () et de largeur () renvoient la hauteur ou la largeur d'un élément. Ils excluent tous les rembourrage, les frontières et les marges.

Pour une panne complète, visitez la documentation de hauteur ou de largeur.

innerheight () et innerwidth ()

Les fonctions innerheight () et innerwidth () renvoient la hauteur ou la largeur de l'élément, y compris son rembourrage supplémentaire (mais il exclut à la fois les frontières et les marges)

Pour une ventilation complète, visitez la documentation Innerheight ou Innerwidth.

eterheight () et oUTERWIDTH ()

Les fonctions extérieurs () et ulterwidth () renvoient la hauteur ou la largeur de l'élément et incluent son rembourrage et sa bordure.

De plus, vous pouvez également spécifier pour inclure ses marges en passant une valeur de vrai à la fonction.

Pour une ventilation complète, visitez la documentation OUTERHEIGHT ou OUTERWIDTH

Exemples d'animation de défilement

indiqué ci-dessous une série d'animations qui utilisent les bases de ce dont nous avons discuté. Ces exemples rechercheront des éléments d'animation et appliqueront la classe active de vue lorsqu'elles sont dans la fenêtre.

Les éléments

que vous souhaitez déplacer devraient tous avoir une classe standard telle que l'élément d'animation qui définit sa position pour être relative ou absolue. De plus, si vous voulez créer plusieurs effets, vous pouvez créer des classes correspondantes telles que la diapositive-gauche qui peuvent être combinées avec la classe in-View. Vous devez ensuite appliquer la transformation à une classe telle que animation-element.slide-left.inview

glisser de gauche

Pour notre premier exemple, nous glisserons dans les éléments de la gauche lorsqu'ils entrent dans la fenêtre. Nous y parvenons en utilisant un tradlate3d sur notre axe X Éléments.

Voir les animations du stylo CSS sur Scroll - Glissez de gauche par SitePoint (@SitePoint) sur Codepen.

Dans cet exemple, nous l'avons utilisé pour afficher les profils du personnel, mais vous pouvez réexpédier les mêmes fonctionnalités pour glisser dans tous les éléments dont vous avez besoin.

s'estomper du fond

Cette fois, nous allons disparaître nos éléments de l'assistance vers le haut pendant que l'utilisateur défile. Nous y parvenons via un tradlate3d sur l'axe y de l'élément.

Pour cet exemple, j'ai répertorié les informations sur les cours sur les sujets dans une structure de grille. Lorsque l'utilisateur fait défiler vers le bas, chaque carte en vue disparaîtra et montera, affichant des informations sur le cours.

Voir les animations du stylo CSS sur Scroll - Fade de bas en haut par SitePoint (@SitePoint) sur Codepen.

Animation de rebond en plusieurs étapes

Pour notre dernier exemple, nous utiliserons une animation à plusieurs étapes. Pour ce faire, nous définirons les animations de cadres clés personnalisées qui combinent une rotation avec une traduction. Ce type d'animation peut aider à présenter les domaines de votre site Web (pour cet exemple, nous présentons les profils des membres du personnel).

Voir les animations CSS Pen sur Scroll - Multi-Step Move by SitePoint (@SitePoint) sur Codepen.

où à partir d'ici?

d'ici, vous pouvez prendre les concepts que vous avez appris et les appliquer à vos projets.

Maintenant que vous pouvez détecter quand un élément est en vue, vous pouvez enchaîner des transformations ou des effets supplémentaires pour créer des interfaces interactives. Par exemple, lorsqu'un élément entre dans la fenêtre (et après sa transformation), vous pouvez ensuite transformer des éléments supplémentaires tels que la décoloration dans un titre, la mise à l'échelle dans une image, etc.

utilisez-vous déjà ces effets dans vos projets? Ou pensez-vous que les animations sont surutilisées et nuisent à l'expérience utilisateur? Quoi qu'il en soit, j'aimerais avoir de vos nouvelles dans les commentaires.

Faire passer vos compétences CSS au niveau supérieur avec notre livre CSS Master, 2e édition de Tiffany B. Brown - couvrant les animations CSS, les transitions, les transformations et bien plus encore.

Questions fréquemment posées (FAQ) sur les animations basées sur un défilement avec jQuery et CSS3

Quelles sont les exigences de base pour créer des animations basées sur Scroll à l'aide de jQuery et CSS3?

Pour créer des animations basées sur Scroll à l'aide de jQuery et CSS3, vous avez besoin d'une compréhension de base de HTML, CSS et JavaScript. Vous devez également faire inclure la bibliothèque jQuery dans votre projet. JQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités qui simplifie le document HTML traversant, la manipulation des événements et l'animation. CSS3, en revanche, est la dernière évolution du langage des feuilles de style en cascade et vise à étendre CSS2.1. Il apporte beaucoup de nouveautés tant attendues, comme les coins arrondis, les ombres, les gradients, les transitions ou les animations.

Comment puis-je commencer à créer des animations à base de défilement en utilisant jQuery et CSS3?

Pour commencer à commencer Création d'animations basées sur Scroll, vous devez d'abord inclure la bibliothèque JQuery dans votre fichier HTML. Vous pouvez soit le télécharger à partir du site Web jQuery ou l'inclure directement à partir d'un réseau de livraison de contenu (CDN). Une fois que vous avez JQuery inclus, vous pouvez commencer à écrire votre code JavaScript dans un fichier .js séparé ou dans des balises de script dans votre fichier HTML. Vous pouvez ensuite utiliser la méthode .Animate () de JQuery pour créer des animations. Pour les animations CSS3, vous pouvez utiliser les images clés et la propriété d'animation.

Puis-je contrôler la vitesse des animations basées sur un défilement dans jQuery?

Oui, vous pouvez contrôler la vitesse des animations basées sur un défilement en jQuery. La méthode .Animate () accepte un paramètre de durée, qui détermine la durée de l'animation. La durée est spécifiée en millisecondes; Des valeurs plus élevées indiquent des animations plus lentes, pas plus rapides.

Comment puis-je rendre mes animations basées sur un défilement plus lisse?

Pour rendre vos animations basées sur un défilement plus lisse, vous pouvez utiliser la `` facilité -Tour de la valeur de la propriété CSS3 Transition-Imming-Function. Cette valeur spécifie que l'animation doit commencer lentement, accélérer au milieu, puis ralentir à la fin. Cela peut donner une sensation plus naturelle et fluide à vos animations.

Comment puis-je déclencher une animation lorsque l'utilisateur défile vers un certain point sur la page?

Vous pouvez utiliser la méthode .scroll () de jQuery pour déclencher un événement lorsque l'utilisateur défile vers un certain point sur la page. À l'intérieur de la méthode .scroll (), vous pouvez utiliser la méthode .scrolltop () pour obtenir la position verticale actuelle de la barre de défilement. Vous pouvez ensuite utiliser une instruction IF pour vérifier si la position de défilement est au-delà d'un certain point, et si oui, déclenchez l'animation.

Puis-je utiliser des animations CSS3 sans jQuery?

Oui, vous, vous Peut utiliser des animations CSS3 sans jQuery. CSS3 présente la règle @keyframes et la propriété d'animation, qui vous permettent de créer des animations uniquement à l'aide de CSS. Cependant, JQuery peut fournir plus de contrôle et de flexibilité sur vos animations, telles que la modification dynamique des propriétés d'animation basées sur l'interaction utilisateur.

Comment puis-je arrêter ou suspendre une animation basée sur un défilement dans jQuery?

Vous pouvez arrêter une animation basée sur Scroll dans jQuery en utilisant la méthode .stop (). Cette méthode arrête l'animation en cours d'exécution sur les éléments sélectionnés. Pour faire une pause d'animation, c'est un peu plus complexe car JQuery ne prend pas en charge la pause animation. Cependant, vous pouvez y parvenir en utilisant un plugin ou en gardant manuellement la trace de l'état d'animation et de la progression.

Comment puis-je créer des effets de défilement de parallaxe à l'aide de jQuery et CSS3?

Le défilement de parallaxe est un Technique où les images de fond se déplacent plus lentement que les images de premier plan, créant une illusion de profondeur. Vous pouvez réaliser cet effet en utilisant jQuery et CSS3 en modifiant la vitesse du mouvement de l'image d'arrière-plan par rapport à la vitesse du défilement de la page.

Puis-je animer plusieurs propriétés CSS à la fois en utilisant jQuery?

Oui, vous pouvez animer plusieurs propriétés CSS à la fois en utilisant la méthode .animate () de jQuery. Il vous suffit d'inclure les propriétés que vous souhaitez animer sous forme de paires de valeurs clés dans le paramètre d'objet Properties de la méthode .animate ().

Comment puis-je garantir que mes animations basées sur un défilement fonctionnent sur différents navigateurs?

Pour vous assurer que vos animations basées sur Scroll fonctionnent sur différents navigateurs, vous devez toujours utiliser des préfixes de fournisseurs pour les propriétés CSS3. Ces préfixes garantissent que les propriétés sont reconnues dans tous les navigateurs, même si elles sont toujours expérimentales. Pour JQuery Animations, vous n'avez pas à vous soucier de la compatibilité du navigateur car JQuery s'en occupe pour vous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!