Les effets de défilement sont de plus en plus populaires comme moyen d’augmenter l’interaction et l’intérêt des utilisateurs. Grâce à un positionnement en arrière-plan intelligent, des animations et un peu de JavaScript, vous pouvez donner vie à votre page de manière à surprendre et à attirer l’attention de vos utilisateurs.

Il existe une grande variété de tactiques que vous pouvez utiliser pour créer une expérience de défilement unique sur votre site. Rejoignez-nous alors que nous examinons vingt nouveaux sites et comment ils utilisent les effets de défilement de différentes manières.

Gozu

Ce site est vraiment intéressant et unique. Le canevas est divisé en tiers verticalement, la section du milieu étant mise en évidence au-dessus des autres. Lorsque vous faites défiler, la page saute d’une distance prédéfinie pour mettre en surbrillance la section suivante. C’est un effet assez cool qui donne une expérience de défilement infini (en boucle) qui ne ressemble à aucun autre site que j’ai vu.

Festival MyProvence

Ce site est une série de huit diapositives plein écran différentes. Chaque fois que vous faites défiler, la page passe automatiquement à la diapositive suivante ou précédente, qui se redimensionne automatiquement à la taille d’écran actuelle. Si vous concevez un site avec des sections claires et que vous ne voulez pas nécessairement que les utilisateurs se concentrent sur l’intervalle, c’est une excellente façon de procéder.

Monokroom

tranche la page verticalement plusieurs fois et fait défiler chaque tranche à une vitesse différente. Ce qui est cool, c’est que les couches désordonnées et décomposées se rassemblent en quelques points prédéfinis pour que tout soit beau et organisé. Au fur et à mesure que vous faites défiler plus loin, il y a une animation plutôt cool d’engrenage rotatif à découvrir également.

AFORM: Coach fitness

Ce site est entièrement consacré aux données. Au fur et à mesure que vous faites défiler les images d’arrière-plan, les mots et les nombres volent dans et hors de l’écran. Les nombres ont un effet impressionnant qui leur est appliqué qui les fait compter jusqu’à ce qu’ils atteignent leur valeur cible. C’est une façon fascinante de présenter ce qui serait autrement des informations statiques.

Matcha puissant

Ce site est un exemple parfait de la façon dont vous pouvez utiliser les points de défilement pour diriger spécifiquement l’attention de l’utilisateur vers des emplacements très précis. Lorsque vous faites défiler, différents éléments de la page sont mis en surbrillance pour attirer votre attention. Certains disparaissent, d’autres se tordent, tournent ou grandissent, il y a même une mini vidéo qui se déclenche une fois que vous atteignez ce point sur la page. Lorsque vous utilisez le site, vous ne pouvez pas vous empêcher de regarder exactement où les concepteurs voulaient que vous.

Rapport annuel MailChimp

Le rapport annuel de MailChimp est un autre exemple d’utilisation de la technologie de défilement pour rendre les données vraiment intéressantes. Le côté droit de la page fait défiler diverses infographies animées au fur et à mesure que l’arrière-plan change de couleurs et de graphiques et que le côté gauche parcourt les différentes sections du rapport.

SCANNER

Celui-ci n’est pas tant un effet sophistiqué qu’un système de défilement intéressant. Au lieu de faire défiler toute la page, ce site vous permet de survoler et de faire défiler chacune des colonnes principales individuellement. Le résultat est un excellent moyen de parcourir une tonne de contenu tout en gardant toutes les informations de navigation et du site principal accessibles.

Le plan amis et famille

Comme notre premier exemple, ce site utilise un simple effet de parallaxe à défilement vertical pour créer une sensation en couches qui rend l’expérience assez dynamique sans animations sophistiquées ni temps de chargement ennuyeux.

Villa Astoria

Celui-ci est si simple et subtil que vous pourriez le manquer. Lorsque vous faites défiler la page, il y a des espaces dans l’arrière-plan qui révèlent l’image en dessous. Cependant, chaque fois que vous arrivez à une lacune, l’image de fond révélée est différente.

WOODDECKER

Ce site utilise des effets de défilement pour mettre en évidence la nature tous temps de leur produit. En survolant le milieu de la page, vous verrez une dalle en bois. Au fur et à mesure que vous faites défiler, différents éléments météorologiques animés sont projetés sur le produit, ainsi que des fenêtres contextuelles informatives qui vous informent des spécificités de la résistance aux intempéries.

Web efficace

Ce site utilise le même effet que Astoria Villa ci-dessus, présentant parfois des lacunes dans l’arrière-plan qui révèlent des images et du texte différents lorsque vous faites défiler.

Médias gras

Fat Media a une tonne de choses qui se passent pendant que vous faites défiler. Un chemin en pointillé s’anime et vous conduit vers le bas lorsque les éléments volent dans et hors de la vue. Différents points de données numériques sont présentés d’une manière presque identique à ce que nous avons vu dans AFORM ci-dessus.

Fannabee

Celui-ci est presque trop fou pour l’expliquer, alors assurez-vous de le vérifier vous-même. Ici, le défilement anime l’arrière-plan et les éléments de premier plan. Les éléments tournent et tombent, les images changent, les iPhones glissent vers l’intérieur et l’extérieur; c’est fou… dans le bon sens.

Antonio Errigo

Antonio utilise quelques effets de défilement de parallaxe simples mais efficaces. Un avion passe dans les nuages, Antonio saute dans et hors de vue, etc.

Andrea Sichinolfi

Différents effets sont en jeu à différents moments ici. Lorsque vous faites défiler, vous atteignez une zone avec une section qui se développe soudainement pour révéler le contenu caché, les cercles changent la largeur de leur trait, les éléments sortent de l’écran; beaucoup de superbes animations pour vous intéresser.

Stratégie Bam

Celui-ci est vraiment impressionnant. Ici, les effets de défilement sont utilisés pour raconter une histoire. Lorsque vous faites défiler, vous voyez une série de panneaux, chacun contenant une petite scène animée, révélant la partie suivante de l’histoire. Si vous cherchez un moyen d’injecter du récit dans votre conception, c’est une excellente source d’inspiration.

Cuisine Italio

Une autre utilisation très simple des effets de défilement. Au fur et à mesure que vous vous déplacez vers le bas de la page, différents ingrédients apparaissent. À un moment donné, un bol de salade saute hors du chemin pour révéler un conteneur circulaire de texte en dessous.

Équipe Rit

Celui-ci est vraiment amusant à jouer. Lorsque vous faites défiler la page, la voiture sur la piste vous suit. Faites défiler vers le haut et il se retournera rapidement et essaiera de se rattraper, déviant sauvagement de la piste pour revenir.

Namemesh

présente une nouvelle idée d’interaction qui est une partie efficace et deux parties bizarre. Tapez quelques mots et vous verrez quatre listes d’idées pour les noms de domaine disponibles apparaître. Si vous voulez en voir plus, faites simplement défiler vers le bas. En faisant cela, la liste s’allonge soudainement et se remplit de nouvelles idées. C’est difficile à décrire correctement, alors arrêtez-vous et essayez-le.

Montrez-nous le vôtre!

Maintenant que vous avez vu notre vitrine de nouveaux sites utilisant des effets de défilement, laissez un commentaire ci-dessous et montrez-nous tout ce que vous avez construit autour de ce thème. Si vous n’avez pas personnellement créé de site avec des effets de défilement, montrez-nous certains de vos sites Web préférés utilisant cette technique.

Chez Develite , une agence web Tunisie, nous nous efforçons de nous tenir au courant des tendances actuelles et à venir dans le domaine du marketing en ligne. Et, pour cette raison, nos stratégies ne manquent jamais de fonctionner, que ce soit sur les plateformes sociales ou tout autre canal de marketing numérique.