Effets de défilement d'élémenteur : 16 animations de défilement d'image

Principaux points à retenir

• Les effets de défilement des éléments dans l'éditeur de stock sont six commandes sous Advanced > Motion Effects > Scrolling Effects (Vertical Scroll, Horizontal Scroll, Transparency, Blur, Rotate and Scale), et chacune déplace un seul élément.
• Les commandes Scrolling Effects sont une fonctionnalité Elementor Pro et le plugin gratuit Elementor 4.3.2 ne les contient pas.
• Les 16 effets de défilement d'image sur cette page sont des widgets Master Addons Widget Builder qui épinglent une scène plein écran et animent tout un ensemble d'images contre la position de défilement, y compris un cube 3 D, un livre tournant la page et un jeu de cartes empilable.
• Chacun des 16 widgets de défilement possède son propre téléchargement zip contenant un fichier JSON et un README, et le JSON est importé via Master Addons > Widget Builder > Import Widget, qui accepte uniquement les fichiers.json.
• Chacun des 16 widgets inclut une règle de préférence à mouvement réduit, de sorte que les visiteurs qui éteignent le mouvement dans leur système d'exploitation obtiennent une mise en page fixe au lieu de l'animation.

Les effets de défilement des éléments, comme la plupart des gens les rencontrent, sont les contrôles des effets de défilement dans le panneau Effets de mouvement : défilement vertical, défilement horizontal, transparence, flou, rotation et échelle Chacun pousse une seule image ou un seul cap lorsque la page se déplace, et c'est aussi loin qu'ils vont. Épingler une section pendant qu'un cube tourne à l'intérieur est au-delà d'eux.

Cet article affiche 16 animations de défilement d'image qui fonctionnent à cette plus grande échelle. Chacun est un widget prêt à l'emploi pour le Master Addons Widget Builder avec une démo en direct que vous pouvez ouvrir avant d'installer quoi que ce soit. Vous trouverez ci-dessous ce que fait chaque effet, le type de site qui lui convient, comment importer l'ensemble et ce qu'il faut vérifier pour la vitesse et l'accessibilité.

Ce que les effets de défilement Elementor peuvent faire par eux-mêmes

Les propres effets de défilement d'Elementor modifient une propriété d'un élément au fur et à mesure que le visiteur défile Vous sélectionnez un widget ou un conteneur, ouvrez Avancé > Effets de mouvement, allume Effets de défilement& choisissez parmi six options. Page d'aide Effets de mouvement de l'élémenteur les répertorie comme défilement vertical, défilement horizontal, transparence, flou, rotation et échelle.

Ces commandes appartiennent à Elementor Pro. Nous avons vérifié le plugin gratuit Elementor 4.3.2 et les commandes de défilement n'y figurent pas.

Un effet de défilement ne connaît que son propre élément et la fenêtre d'affichage Il n'a aucun moyen de maintenir une section en place pendant que le contenu à l'intérieur change, et il ne peut pas coordonner dix images donc elles arrivent dans l'ordre La parallaxe sur une image de héros est facile à mettre en place de cette façon Une photo qui se brise en pièces de puzzle et se réassemble au fur et à mesure que vous lisez a besoin d'un widget personnalisé, ce que couvre le reste de ce post.

Si la parallaxe simple est tout ce dont vous avez besoin, le Relax extension dans Master Addons s'en charge, et notre aperçu d'animation couvre les effets d'entrée et flottants.

Ce dont vous avez besoin pour exécuter ces widgets

Vous avez besoin d'Elementor, de Master Addons et du Widget Builder Le plugin gratuit Elementor suffit du côté Elementor, car aucune de ces conceptions n'utilise de widgets Elementor Pro ou son panneau Motion Effects.

Les widgets sont importés et édités dans le Constructeur de widgets, qui est une fonctionnalité Master Addons Pro. Les plans sont sur le page de tarification. Chaque design ci-dessous a son propre lien de téléchargement à côté de sa démo en direct, et il n'y a pas de porte de messagerie.

Vous voudrez également vos propres images Les démos utilisent des photographies du domaine public et sous licence ouverte, et chaque widget possède des champs d'image ou un répéteur, donc les échanger prend quelques minutes.

Les démos en direct n'ont rien besoin d'être installées. Ouvrez-en un et faites-le défiler à quelques tailles de fenêtre, ce qui est le moyen le plus rapide de savoir si un style de mouvement correspond à votre contenu.

16 effets de défilement d'image pour Elementor

Les 16 effets de défilement d'image se répartissent en cinq groupes : des révélations épinglées, des objets en 3 D, des jeux de cartes, des galeries sans fin et des mises en page d'index ou de magasins La plupart d'entre eux utilisent la même fondation Le widget se donne une piste haute, épingle une scène à un écran à l'intérieur avec un positionnement collant, et lit jusqu'où vous avez fait défiler la piste pour faire défiler l'animation et tout joue en sens inverse.

L'image épinglée révèle

Ces quatre-là maintiennent un cadre immobile et changent ce qu'il contient. Ils conviennent aux pages de forme longue où chaque image est accompagnée d'un paragraphe.

1. Indice d'ouverture

Chaque entrée commence comme une fine bande horizontale et s'ouvre sur une photographie complète lorsqu'elle atteint le milieu de l'écran, la façon dont un obturateur de feuille s'ouvre Le titre se trouve sur l'image et les entrées alternent à gauche et à droite sur la page Le cadre reste épinglé pendant que son texte défile, puis lâche prise.

C'est une image dévoilée sur rouleau avec un sol sombre, donc elle flatte la photographie de nuit et les prises de produits sur noir Quatre à six entrées est la gamme confortable.

2. Cadre en bardeaux

Un cadre reste fixe à droite tandis que la copie défile à gauche. À mesure que chaque nouveau bloc de texte arrive, son image glisse sur la précédente à l'intérieur du même cadre, comme des bardeaux sur un toit. L'arrière-plan de la page change de couleur à chaque image.

Le changement de couleur indique au lecteur qu'un nouveau chapitre a commencé, vous pouvez donc supprimer les séparateurs et les sous-titres. Utilisez-le pour des études de cas et des visites de fond avec quatre ou cinq éléments qui méritent chacun un paragraphe.

3. Chapitres en queue d'aronde

Chaque chapitre contient une image découpée en morceaux de puzzle imbriqués. Ils commencent dispersés et tournés. Le défilement les ramène chez eux et la légende apparaît une fois que l'image est entière.

La position de chaque pièce est calculée à partir du décalage de défilement, de sorte que l'animation ne court jamais devant le lecteur ou est en retard Elle fonctionne bien pour les pages de narration avec deux à quatre grandes images Je ne passerais pas au-delà de quatre, parce que le tour s'use mince.

4. Grille de trame

La section s'ouvre sur une photographie à fond de saignée Faites défiler, et elle se rétrécit à sa place dans une grille à trois colonnes pendant que les autres images volent autour d'elle Continuez à faire défiler et les rangées se séparent pour faire place à un titre et à un bouton.

Il s'agit d'un héros fort pour une page d'accueil de boutique ou de studio, car elle passe d'une image globale à la collection complète à un appel à l'action dans une seule section Pour les alternatives statiques, voir notre Modèles de sections héros d'élémentor.

Effets de défilement 3D

Ces quatre utilisent les transformées et la perspective CSS 3 D, et la position de défilement les entraîne Si vous voulez une 3 D qui joue sur une minuterie ou qui répond aux flèches, notre guide des Carrousel Elementor 3D couvre ce côté.

5. Cube de facettes

Six photographies sont assises sur les six faces d'un cube Le cube tourne d'une face par tronçon de défilement tandis que la photographie que vous faites face s'étend sur tout le fond Un rail de vignettes à droite montre où vous êtes et vous permet de sauter sur n'importe quel visage.

Six est la limite dure, puisqu'un cube a six côtés Cela en fait un ajustement soigné pour un ensemble de portefeuille court ou une gamme de six produits.

6. Tube d'orbite

Des anneaux de cartes photo se tiennent autour d'un axe vertical, empilés les uns au-dessus des autres pour former un tube Vous le regardez juste à l'extérieur, donc le mur proche passe grand à travers l'écran et le mur lointain montre petit et sombre à travers les interstices Un globe de verre se trouve sur l'axe dans la démo, et le widget offre d'autres objets centraux, y compris un orbe, un atome, une planète annelée, un cube de fil, une image ou une icône.

Il a besoin de beaucoup d'images à lire sous forme de tube, alors pensez à des galeries de seize ou plus.

7. Porte-fouet

Easel Rack est une galerie de rouleaux qui se tient en profondeur Chaque image est une plaque détournée de vous jusqu'à ce que le parchemin l'amène au niveau du milieu de l'écran, où il se balance pour vous faire face. Les légendes s'assoient à côté des plaques et les objets zigzaguent à gauche et à droite.

La démo parcourt six étapes d'un atelier de poterie, et c'est là son utilisation naturelle : des étapes de processus ou une liste numérotée de services.

8. Livre de cachots

Un livre fermé s'ouvre au fur et à mesure que vous faites défiler, puis tourne d'une page à la fois Chaque feuille est imprimée des deux côtés et pivote sur le dos, donc vous voyez le dos d'une page au fur et à mesure qu'elle défile vers le haut et que le livre se ferme à nouveau.

La démo est un menu de restaurant avec une photographie sur la page de gauche et des plats sur la droite Elle convient également aux lookbooks et aux brochures Avec JavaScript désactivé, les pages retombent dans une colonne simple en ordre de lecture, donc rien n'est caché aux moteurs de recherche ou aux lecteurs d'écran.

Cartes

9. Pont à riffle

Il s'agit des cartes empilables sur motif de défilement, réalisées avec des cartes portrait Chaque étape de défilement pose la carte suivante sur le dessus de la pile à un léger angle La couleur de fond se décale pour correspondre à chaque carte, et une petite barre de progression compte à travers l'ensemble.

Les images de portraits fonctionnent mieux : affiches, couvertures de livres, emballages, écrans d'applications Six à huit cartes sont à peu près correctes.

10. Pont brisé

Shatter Deck est un jeu de photographies plein format, chacune avec une légende et un bouton, et deux flèches pour les parcourir Le déplacement entre les images coupe l'image en une grille de petites tuiles, les disperse et les rassemble comme photographie suivante.

En dehors de la boîte, vous le déplacez avec les flèches, une traînée horizontale ou les touches fléchées une fois que le jeu a le focus La page garde son défilement vertical normal Allumez le Faire défiler vers Scrub le contrôle et le défilement entraînent la transition à la place Avec un mouvement réduit activé, les tuiles cessent de voler et le pont s'estompe.

Galeries de rouleaux sans fin

Ces trois boucles Il n'y a pas de première ou dernière image, ce qui convient plus à la navigation qu'à la lecture.

11. Salon accroché

Salon Hang est un mur sans haut ni bas Les photos sont accrochées dans une colonne, poussées à gauche et à droite du centre de différentes quantités et coupées à différentes largeurs, la façon dont un salon est suspendu encombre un mur de galerie. Après que la dernière image soit à nouveau la première, cliquez sur une image et elle grandit dans sa propre page avec une légende et un bouton Retour.

Utilisez-le pour des portfolios de photographies où la commande n'a pas d'importance et chaque image mérite un examen plus approfondi.

12. Fil de filaments

Photographies la taille des timbres-poste sont enfilés le long d'un fil fermé qui s'enroule sur l'écran Vous voyagez le long du fil en faisant défiler Partout où il passe le milieu de la scène, les images gonflent comme sous une loupe, et une légende nomme celle qui est devant Cliquez sur une photographie pour l'ouvrir.

C'est le meilleur des seize pour les grandes archives, car les petites vignettes signifient que beaucoup d'images tiennent à l'écran à la fois Sans JavaScript le widget montre chaque photographie dans une grille simple.

13. Portraits de bobines

Reel Portraits montre des portraits plein écran un à la fois, sur une boucle Chacun porte un seul mot ensemble très grand à travers elle, courant latéralement le long d'une courbe comme type sur un tambour tournant, avec une ligne manuscrite le traversant l'autre façon La photographie se déplace avec une dérive de parallaxe derrière le type, et un index numéroté se trouve bas sur la gauche.

C'est le design le plus bruyant des seize, et il convient aux sites de mode et éditoriaux Donnez-lui cinq ou six images fortes et un mot chacune.

Index et agencements de magasins

14. Indice de soufflet

Bellows Index montre un corpus de travail une entrée à la fois Chacun a un grand titre, deux plaques superposées de la même image et une légende, et toute la page prend une nouvelle couleur pour chaque entrée Le titre est défini dans une police variable, et le widget écrit la pression de défilement sur son axe de largeur, de sorte que le mot s'étire et se règle au fur et à mesure que vous vous déplacez.

Il se lit mieux avec quatre à huit entrées Essayez-le pour une exposition ou un ensemble de projets présentés.

15. Indice des marées

Tide Index a deux colonnes qui se déplacent l'une contre l'autre Les titres courent vers la gauche et les personnes qui les ont fait descendre vers la droite Pendant que vous faites défiler, chaque ligne glisse latéralement sur une vague, la colonne de gauche dans un sens et la droite son miroir, tandis qu'une photographie pour la ligne actuelle se trouve entre eux.

Celui-ci est dirigé par type, avec l'image dans un rôle de soutien Il convient aux listes de crédit et aux index de projets longs.

16. Swatch Shop

Swatch Shop est un couloir de photographies de produits que vous descendez en faisant défiler Alors qu'un produit est devant, toute la pièce prend sa couleur, et une carte à côté montre le nom, une brève description, le prix, les options de taille et un bouton Une colonne de points de couleur à droite marque votre place.

Il est construit pour de petits catalogues : fleuristes, céramiques, bougies, imprimés Sept produits remplissent la démo.

Les 16 effets de défilement en un coup d'œil

Utilisez ce tableau pour faire correspondre un effet de défilement au contenu que vous avez. Le nombre d'éléments correspond à ce que la mise en page gère confortablement.

Téléchargez les 16 widgets à effet de défilement

Chaque widget est un zip séparé, vous ne téléchargez donc que ceux que vous prévoyez d'utiliser Chaque zip contient deux fichiers : le JSON du widget et un README qui répertorie ses contrôles.

Décompressez un fichier avant de l'importer L'importateur Widget Builder lit les fichiers.json et n'acceptera pas le zip lui-même.

Comment importer un widget de défilement dans Elementor

Vous importez chaque widget via le Master Addons Widget Builder, puis le faites glisser sur une page comme n'importe quel autre widget Elementor Le tout prend environ deux minutes par conception.

1. Téléchargez le widget que vous voulez et décompressez-le À l'intérieur se trouve un fichier nommé comme widget-facet-cube.json1, plus un README.
2. Dans votre tableau de bord WordPress, rendez-vous sur Modules complémentaires principaux > Créateur de widgets et cliquez Importer Widget.
3. Faites glisser un fichier.json sur la zone de téléchargement ou cliquez sur Parcourir les fichiers et choisissez-le. L'importateur prend un fichier à la fois, alors répétez ceci pour chaque conception que vous souhaitez.
4. Ouvrez n'importe quelle page dans Elementor et recherchez dans le panneau du widget le nom du design, par exemple “Facet Cube” Faites-le glisser dans un conteneur pleine largeur.
5. Remplacez les images de démonstration et le texte dans l'onglet Contenu, puis définissez les couleurs et la typographie dans l'onglet Style.

Ces fichiers ne passent pas par le propre d'Elementor Modèles > Importer écran. Cet importateur est destiné aux modèles de pages et de sections, que nous couvrons comment importer un modèle Elementor. Les widgets épinglés ont également besoin d'espace Mettez-les dans un conteneur réglé sur toute la largeur sans rembourrage, ou la scène s'assoira à l'intérieur d'une colonne étroite et aura l'air exiguë.

À lire aussi: Comment ajouter GSAP Animation dans Elementor(traduction), si vous souhaitez écrire votre propre animation déclenchée par défilement à partir de zéro.

Widget de défilement d'image vs effet de défilement d'image

Un widget de défilement d'image et un effet de défilement d'image sont deux choses différentes, et les noms provoquent la confusion Dans la plupart des addons Elementor, “Image Scroll” signifie une grande capture d'écran à l'intérieur d'un cadre fixe qui glisse vers le haut lorsque vous survolez les boutiques de thème l'utilisent pour prévisualiser une longue page dans une petite boîte.

Un effet de défilement d'image est une animation liée au défilement de page : des images qui révèlent, empilent, tournent ou voyagent lorsque le visiteur descend la page Tout dans ce post est le deuxième type Si l'aperçu du survol est ce que vous êtes venu chercher, vous avez besoin d'un addon avec un widget de défilement d'image, car aucun de ces 16 ne fait cela.

Scrollytelling dans Elementor

Scrollytelling est une page où le défilement fait avancer une histoire : un visuel reste épinglé pendant que le texte à côté de lui avance, et les changements visuels à chaque étape L'élémenteur peut faire une version de base avec une colonne collante La partie la plus difficile est de faire répondre le visuel exactement à l'endroit où se trouve le lecteur.

Trois de ces widgets sont construits pour cela Shingle Frame associe chaque paragraphe à une image qui remplace le dernier, Dovetail Chapters assemble une image par chapitre pendant que vous lisez, et Quire Book tourne une page pour chaque section Pour une histoire plus longue, empilez deux d'entre eux sur une page avec des sections de texte ordinaires entre les deux, afin que le lecteur se repose du mouvement.

Les effets de défilement ralentissent-ils votre site ?

Les effets de défilement ralentissent un site lorsqu'ils sont construits négligemment, et les coupables habituels sont des images et des animations surdimensionnées qui changent de disposition sur chaque image Ces widgets évitent le deuxième problème Ils s'animent avec les transformations CSS et l'opacité, que le navigateur peut remettre à la carte graphique, et ils utilisent un IntersectionObserver pour savoir quand le widget est à l'écran.

Le poids de l'image dépend de vous, puisqu'un widget qui montre douze photographies chargera douze photographies Exportez-les sous forme de WebP, taillez-les dans la plus grande dimension dans laquelle elles apparaissent et gardez chacune sous environ 150 Ko.

Sur l'accessibilité, les 16 widgets portent un prefers-reduced-motion règle. Un visiteur qui a demandé moins de mouvement à son appareil obtient une mise en page fixe : Weft Grid montre sa grille finie avec le texte dessus, et Shatter Deck se fond. Shatter Deck est également un véritable arrêt d'onglet, donc les touches fléchées fonctionnent une fois qu'il a le focus et ne détournent pas la page autrement.

Pour les téléphones, plusieurs modèles incluent leur propre disposition à écran étroit Facet Cube déplace son rail miniature sur une rangée au pied de la scène, et Reel Portraits transforme son index en une rangée de chiffres Pourtant, testez le widget que vous choisissez sur un vrai téléphone avant de publier Les sections épinglées hautes semblent plus longues sous le pouce que sous une molette de souris Si votre site utilise des points d'arrêt non standard, notre guide de Points d'arrêt des éléments explique comment les ajuster.

J'utiliserais un effet de défilement épinglé par page, deux au maximum Chaque étape épinglée ajoute de la distance de défilement, et un visiteur qui doit faire défiler trois d'entre eux d'affilée le sentira.

Questions fréquemment posées

Réflexions finales

Les effets de défilement intégrés d'Elementor vous offrent six façons de déplacer un élément, et ils vivent dans Elementor Pro. Les 16 widgets ici couvrent le sol au-delà de cela : quatre révélations épinglées, quatre pièces 3 D, deux jeux de cartes, trois galeries sans fin et trois mises en page d'index ou de boutique, chacune avec une démo en direct et une solution de repli au mouvement réduit.

Pour en choisir une, comptez vos images et décidez si leur commande compte, puis choisissez dans le tableau ci-dessus Vous pouvez modifier n'importe lequel de ces modèles, ou en construire un nouveau, dans le Constructeur de widgets.

Lecture connexe

• Boîte d'images d'élément : 16 designs avec démos et téléchargement en direct
• 20 modèles de curseurs d'éléments : Coverflow, Timeline, Témoignage et plus encore
• Carrousel Elementor 3 D : Coverflow, Flip, Arc et Orbit
• Extension d'effets d'animation de 4 éléments sans code
• Elementor Marquee : texte défilant infini, logos et tickets