Il existe actuellement une tendance récurrente à utiliser des éléments de page animés dans la conception Web: lorsque vous faites défiler la page, les éléments s'animent naturellement. Ces animations ne se produisent qu'une seule fois et ne commencent qu'une fois l'élément inséré dans la fenêtre du navigateur.
J'ai un peu exploré ce concept en utilisant jQuery, ainsi que les transitions CSS3. En un mot, ce script recherche les classes spéciales sur la page et utilise jQuery pour ajouter une nouvelle classe aux effets de transition. Les éléments déjà animés sont ensuite supprimés du gestionnaire d'événements. Et une fois qu'il n'y a plus d'éléments à animer, le gestionnaire d'événements est complètement supprimé jusqu'à ce que vous actualisiez la page. Regardez mon exemple de démonstration pour voir exactement ce que nous créons, et suivez-le!
Live Demo - Télécharger le code source
Structure de base de la page
Pour commencer, j'ai créé une mise en page HTML5 simple comprenant une feuille de style externe et une copie de la dernière bibliothèque jQuery. Tout mon JavaScript personnalisé sera écrit dans un autre fichier externe appelé scrollview.js.
Les informations d'animation peuvent être stockées directement en HTML à l'aide de classes et d'attributs de données. Jetons un coup d'œil au premier élément animé de ma page.
Celui-ci contient deux divs animés distincts qui flottent côte à côte dans un conteneur. L'attribut position de données nous dit de quel côté viendra l'élément. Ils utilisent également quelques classes pour diverses propriétés CSS.
le .floatr et .floatl les classes représentent des éléments flottants à droite et à gauche, respectivement. .animBlock les éléments sont masqués par défaut en utilisant une opacité zéro, ainsi que les propriétés de transition pour l'animation.
Vous trouverez cet extrait de code dans ma feuille de style. Il tourne autour de la .notViewed et .visé les classes qui nous disent quand un élément a été (ou n'a pas) été animé. Chaque bloc affiche initialement avec .notViewed et jQuery vérifie ces éléments animés pour voir ceux qui ont été visualisés et ceux qui ne l’ont pas été.
Lors de l'ajout du .visé classe, ces éléments se déplacent de 20% du côté droit / gauche et changent également d'opacité de 0% à 100%. Les techniques en CSS sont assez basiques et fonctionnent correctement dans tous les navigateurs modernes. JQuery gère le changement de classe entre les classes lorsque les choses se compliquent un peu.
Relier l'événement de défilement
Je veux passer dans scrollview.js qui est séparé du fichier d'index principal. Il existe deux blocs de code, l'un étant le gestionnaire d'événements et l'autre, une fonction prédéfinie.
Les deux premières variables représentent des copies en cache d'objets jQuery. $ blocs est un objet jQuery représentant tous les blocs animés avec .notViewed Des classes. Fondamentalement, il devrait contenir tous les éléments animés possibles, ce qui nous permet de tout parcourir en boucle. fenêtre $ est appelée à chaque fois que l'utilisateur fait défiler la page. L'utilisation d'une copie en cache est donc plus efficace en termes de traitement et de mémoire.
La méthode jQuery .each () peut parcourir des objets et des tableaux. Dans ce cas, nous avons un objet contenant de nombreux autres objets sur la page. Sur chaque événement de défilement, cette fonction traitera chaque élément du $ blocs objets un par un.
La première si{} instruction permet de gagner du temps une fois qu'un élément a terminé l'animation. Comme la variable $ blocks est un objet mis en cache, elle ne se mettra pas à jour automatiquement une fois que certaines classes auront été modifiées. Nous devons donc vérifier si chaque élément a déjà été mis à jour pour utiliser la classe. .viséet, dans ce cas, arrêtez l'opération en cours pour passer à la suivante.
Sinon, nous savons que l'élément n'a pas encore été animé. C’est là que la fonction la plus détaillée isScrolledIntoView () sera exécuté en vérifiant un certain nombre de propriétés spécifiques. Mon code est en fait modifié depuis ce message sur Stack Overflow, qui fournit un excellent modèle de départ.
Éléments animés
Je diviserai cette fonction en segments pour en faciliter la compréhension. Au début, il est assez simple de configurer des variables propres à l'événement de défilement et à chaque élément transmis via $ block.
Les deux premières variables docViewTop et docViewBottom va changer sur chaque rouleau. J'ai également pensé que parfois nous pourrions vouloir animer des éléments avant qu'ils ne soient complètement dans la fenêtre. C’est pourquoi j’ai créé un décalage variable qui peut être appliquée directement en HTML. Vous remarquerez que je cherche un seul décalage de données property - ce qui est facultatif - et remplacera la valeur par défaut de 0. Vous verrez que cela s'applique à mon deuxième élément animé en bas de la page:
Le morceau suivant de code JS vérifie l'emplacement de l'élément actuel sur la page. Rappelez-vous que tout sera mis en boucle, donc ces valeurs changent en fonction de la fenêtre d'affichage actuelle et de l'élément actuellement transmis à travers la fonction. Deux variables elemTop et elemBottom donnez-nous des valeurs numériques référençant toute la hauteur de l'objet en cours.
En utilisant le décalage 0, il n'est pas nécessaire de changer les codes, nous n'animons que lorsque l'élément est en pleine vue. Mais quand il y a un décalage, nous devons vérifier si l'utilisateur fait défiler l'écran vers le haut, ou le haut. Je l'ai fait en soustrayant la valeur actuelle de la fenêtre supérieure de la position supérieure de l'élément réel.
Si l'élément est situé plus haut sur la page que la fenêtre d'affichage de l'utilisateur, son nombre sera plus petit (plus proche de 0). Soustraire la valeur supérieure de l'élément (la plus petite) de la valeur supérieure de la fenêtre d'affichage (la plus grande) correspondra toujours à un nombre positif ou très proche de zéro. Donc, l'utilisateur doit être plus bas sur la page et donc faire défiler vers le haut. L'ajout du décalage à la valeur supérieure de l'élément en fait un nombre supérieur et donc? Inférieur? sur la page, même si cela ne bouge pas réellement. C'est toute la logique figurative pour déterminer quand l'animation offset doit commencer.
Sinon, l'utilisateur devrait descendre du haut et nous soustrayons cette valeur de décalage du bas de l'élément (maintenant le bas plus proche). Ce concept est un peu déroutant au début. Essayez de penser à ces valeurs supérieures / inférieures telles que les nombres de pixels. Le sommet de la fenêtre représente 0 et le bas de la fenêtre représente la valeur la plus élevée possible.
Changer de classe CSS
La dernière pièce de cette fonction crée l'effet d'animation une fois que l'élément est visible. En règle générale, l'instruction logique ne s'exécute que lorsque l'élément se trouve dans la fenêtre d'affichage complète. Cependant, la valeur de décalage peut permettre aux éléments de démarrer le processus d’animation plus tôt.
En termes plus simples, la logique lit quelque chose comme ceci: lorsque la position inférieure de l'élément est en vue ou juste en dessous de la vue et que la position supérieure est parfaitement alignée ou juste en vue, animez l'élément. Les deux conditions doit être vrai avant que JavaScript exécute n'importe quel code.
Il devrait être quelque peu évident que la seule exigence est de supprimer .notViewed puis ajoutez notre classe d'animation .visé. Cela se produit une fois par page, donc une fois qu'un élément a été placé en vue, il active maintenant la commande de retour depuis mon tout premier bloc de code. Il reste encore à l'intérieur du bloc $ objet, mais nous gagnons du temps en ne l'exécutant pas à nouveau avec cette fonction.
Alors, que se passe-t-il une fois que tous les éléments sont visibles? Nous ne voulons pas garder cet événement de défilement attaché au-delà de la nécessité. $ ('. animBlock.notViewed'). length renverra un nombre total d'éléments correspondant à ce sélecteur jQuery. Une fois que chaque élément a changé pour .animBlock.viewed cette valeur retournera 0.
Une fois que cela atteint 0, nous venons de terminer l'animation du tout dernier élément de la page. Ainsi, lorsque cela se produit enfin, nous initions .off () attaché à l'événement de défilement de la fenêtre. Désormais, le gestionnaire d'événement de défilement ne se déclenchera que si l'utilisateur actualise à nouveau la page. Il est logique de conserver cette méthode dans la vérification logique finale car elle s'exécute autant de fois qu'il y a d'éléments à animer (dans ma démo, 5 au total).
Live Demo - Télécharger le code source
Fermeture
Cette technique est destinée aux sites Web avancés ne prenant pas nécessairement en charge les anciens navigateurs. La plupart des internautes ont adopté les dernières versions d'IE, Firefox, Chrome, Opera, etc. Toutefois, vous pouvez toujours vérifier les versions de navigateur en JavaScript pour forcer l'affichage de ces éléments lorsque les transitions CSS3 ne sont pas possibles. N'hésitez pas à télécharger une copie de mon code source et à voir ce que vous pouvez construire en utilisant cet effet.