12 tendances essentielles de l'animation par défilement
Les éléments de page animés sont très courants sur les pages de destination et les sites Web de démarrage. Mais ils ne sont pas toujours évoqués dans les cercles de design car l'idée de "animer sur la vue" n'est pas très couverte.
J'utilise la phrase scroll-to-view car elle semble être une description précise. Lorsque vous faites défiler la page, de nouveaux éléments animés apparaissent.
Ce n'est pas une technique qui fonctionne pour tous les sites Web, mais cela ajoute une touche agréable à certaines mises en page. Et j'ai organisé certains de mes favoris ici pour montrer comment ces animations à défilement fonctionnent et pourquoi vous pourriez les utiliser vous-même.
1. Demain Sommeil
Sur le Demain Sommeil site Web, vous remarquerez quelques effets animés assez bénins. Celles-ci font disparaître les différentes parties du texte et les CTA, tout autour de la mise en page.
Ce qui est intéressant, c'est que la plupart des images et des zones d'arrière-plan sont entièrement visibles, même sur le premier défilement. De nombreux sites Web utilisent une animation en fondu pour afficher des images et des captures d'écran tout en gardant le texte visible.
Cette différence mineure aide à attirer l'attention sur le texte au fur et à mesure de son apparition. Un excellent moyen de capter l'attention des visiteurs qui parcourent le site.
2. Twist
Une autre technique que je vois souvent cible la plupart du contenu de la page pour les animations sur défilement.
Par exemple le Twist page d'accueil de l'application inclut divers segments de page et blocs de texte qui s'animent dans et hors de la vue du défilement. Celles-ci ont un effet de décoloration très doux et sont donc perceptibles mais pas trop sévères.
Certains visiteurs peuvent être contrariés par le retard, mais je ne pense pas que ce soit trop long. De plus, il n'anime qu'une seule fois, donc si vous appuyez sur le bas de la page, toutes les animations sont effectuées.
3. App filé
Pour des animations beaucoup plus complexes, consultez le App fil atterrisseur. Celui-ci a des animations en plusieurs parties et même des éléments qui apparaissent sous différents angles.
Certaines des images de démonstration de la capture d'écran s'animent vers le haut, tandis que les modèles de texte / BG associés s'animent vers le bas. Ce style alternatif est assez unique et pas quelque chose que je vois souvent.
Cependant, la page de destination est aussi incroyablement simple et il n'y a pas grand-chose d'autre ici pour attirer l'attention. Dans ce cas, différentes animations fonctionnent bien.
4. DashFlow
De tous ces exemples, je pense DashFlow utilise les techniques d'animation les plus courantes.
Cet atterrisseur anime les images et les textes en une seule séance. C'est très simple et utilise une mise en page à une seule colonne, de sorte que tout le contenu circule directement dans un chemin linéaire.
Rien de particulier à propos de cette conception, au-delà de la méthode très claire d’animation des objets sur le défilement. Un style génial si vous avez un site similaire et que vous souhaitez garder les animations simples.
5. Quuu Promouvoir
Quuu Promouvoir conserve les animations au strict minimum et ne les utilise que dans les zones CTA.
Je ne peux pas dire si cela augmente les conversions mais cela semble être le but. Lorsque vous chargez la page pour la première fois, l'en-tête tout en haut s'anime avec une animation d'inclinaison sur le CTA.
Lorsque vous faites défiler, vous remarquerez que le reste de la page est assez statique. Mais en bas, il y a un CTA final au-dessus du pied de page qui anime et exécute la même animation d'inclinaison.
Va pour montrer que vous pouvez avoir des effets d'animation sur défilement qui ne s'exécutent pas sur toute la page.
6. Qonto
La page d'accueil pour Qonto a une prise intéressante sur l'animation par défilement. Il utilise le même type d’animation sur l’ensemble du site Web et anime les éléments individuels sur le côté.
Pour la majeure partie de la page, cela inclut des sections d'icônes comportant un petit graphique au-dessus d'un contenu expliquant les fonctionnalités de l'application. Pas trop subtile mais pas trop évidente non plus.
De plus, vous pouvez trouver quelques autres styles d'animation dans l'en-tête ainsi que des images BG qui apparaissent en fondu. Cette page est juste un exemple magnifique de ce que animation web peut faire.
7. randonnée
Pour un exemple d’animations subtiles, consultez Une randonnée .
Leur page alterne entre des éléments animés et des éléments fixes. Mais les effets d'animation sont rapides et vous ne vous sentez pas ennuyé à attendre un contenu visible.
C'est ma préférence pour tout effet de défilement vers l'animation. C'est toujours une belle technique mais le timing doit être rapide et précis. Personne ne veut attendre que le contenu apparaisse et Hike le comprend clairement.
8. projet fi
S'il y a quelqu'un qui connaisse bien UX, c'est Google. Et à travers tous leurs produits, ils ont une tonne de pages de destination, Projet fi être un exemple avec des animations fantastiques.
Celles-ci ne s'appliquent qu'aux icônes et ne s'affichent pas, mais apparaissent plus bas sur la page. Au fur et à mesure que vous défilez, vous trouverez des icônes qui apparaissent dans chaque petite section.
C'est un effet assez subtil mais cela ajoute de la vie au design. Et il est basé uniquement sur la position du spectateur sur la page, donc si vous faites défiler vers le haut et redescendez, vous serez accueilli par les mêmes effets d'animation.
9. base
le Page d'accueil du CRM de base est un excellent exemple d'animation simple au travail. Ce site utilise des effets d'animation personnalisés pour déplacer les images dans la ligne de vue du spectateur.
Basé sur le nombre de pages de destination que je vois tous les jours, cela est très typique de ce que j'attends. Ce n'est pas vraiment une animation complexe à recréer et cela n'affecte pas trop l'expérience non plus.
Une chose que je souhaite, c'est que les animations se chargent un peu plus vite. Mais au-delà de cela, je pense qu’il s’agit d’un excellent exemple d’animation d’images sur défilement avec une mise en page très propre pour démarrer.
10. AnyList
Toutes les meilleures applications mobiles ont leurs propres sites Web pour la promotion. Et les meilleurs ont généralement des styles d'animation assez sophistiqués.
AnyList mélange plusieurs techniques différentes sur une seule page. Leur image d'en-tête s'anime sous la zone de coupure, mais c'est la seule animation "en mouvement" sur la page.
Tout le reste se fane et tout utilise un temps de chargement assez rapide pour l'animation. Ces techniques sont utilisées ailleurs sur le site, ce qui lui donne une sensation de cohésion accrue.
11. Ernest
Le style de page pour Ernest est un peu différent des autres pages d'atterrissage que j'ai couvertes.
Il utilise animations de défilement parallaxe pour créer un mouvement sur une seule mise en page avec différentes sections.
Celles-ci varient en fonction de la direction dans laquelle vous faites défiler, que vous vous déplaciez vers le haut ou le bas, et à quelle vitesse. Ils varient également avec l'intensité en fonction des différentes sections de la page.
Vous pouvez naviguer en utilisant le menu de navigation par points latéraux et cela fait rapidement le tour de la page vers différentes zones. C'est l'une des rares techniques que vous verrez souvent sur les pages de parallaxe et cela aidera certainement Ernest à se démarquer.
12. TaxiNet
Pour avoir un aperçu des animations en pleine page en action, jetez un coup d’œil à la TaxiNet site Internet.
Il s'agit d'un ensemble d'effets d'animation basés sur le défilement liés aux icônes, au texte, aux images et même aux styles d'arrière-plan. Les couleurs d'arrière-plan de page individuelles s'animent avec l'utilisateur, ce qui n'est certainement pas une technique typique mais certainement intéressante.
Si vous aimez ce style, vous pouvez absolument appliquer une approche similaire à votre propre page de destination. Assurez-vous de garder les animations vives et rapides, car personne ne veut attendre que vos belles animations se chargent.
Mais si vous les faites bien, ces éléments de défilement permettent d’ajouter un effet positif à toute page de destination.
