18 tutoriels de défilement de parallaxe avec jQuery et HTML5 – 2022
Publié: 2022-03-17La parallaxe est utilisée depuis la fin des années 1940 et est plus récemment utilisée dans des industries comme le jeu, pour créer des expériences de jeu uniques pour tous. Sérieusement, la parallaxe peut sembler nouvelle pour les concepteurs. Pourtant, ce concept nous accompagne depuis si longtemps que les concepteurs ne font que rattraper leur retard et établissent une tendance autour de cet effet de défilement. Pour affiner au mieux la description de la parallaxe, il s'agit d'une technique unique dans la conception Web qui permet aux composants de page Web individuels de défiler aux côtés de l'utilisateur à différents intervalles de temps, ce qui permet de créer un effet d'arrière-plan en mouvement derrière n'importe quel conteneur/grille/contexte.
Chez Colorlib, nous avons fait de notre mieux pour accorder la meilleure attention possible à la parallaxe, tout en maintenant une cohérence d'approches uniques dans chacun de nos articles :
Nous aimerions maintenant vous présenter les meilleurs tutoriels de défilement de parallaxe qui impliquent l'utilisation de technologies telles que jQuery, JavaScript, HTML5 et CSS3. Nous nous sommes concentrés sur des didacticiels conviviaux pour les nouveaux venus dans la conception Web et sur quelques pièces intermédiaires pour expliquer les fondements de la parallaxe et son fonctionnement.
Avant d'aborder nos tutoriels et tout ça, il y a deux aspects à examiner de plus près : l'impact du défilement de parallaxe sur l'optimisation des moteurs de recherche. L'utilisation de fonctionnalités de conception dynamique aura certainement un impact sur la façon dont les moteurs de recherche traitent votre site Web, et vous ne voulez pas vous contenter d'une fonctionnalité qui pourrait avoir un impact négatif sur votre trafic organique. Carla Dawson de Moz a couvert ce sujet avec beaucoup de détails. Le principal point à retenir de son article est la liste de 3 techniques uniques que vous pouvez appliquer pour rendre votre conception de parallaxe plus conviviale pour le référencement. Tout commence avant même que vous n'essayiez de faire un effet de parallaxe fonctionnel sur votre conception, implémentez d'abord la méthodologie SEO, puis concentrez-vous sur la création du contenu, de cette façon vous laissez la place aux moteurs de recherche pour comprendre le fonctionnement de votre site Web, mais autorisez également les robots pour traiter le contenu.
Le deuxième aspect est l'expérience utilisateur de la conception de parallaxe, si elle convient à toutes les conceptions et quel type de problèmes cela peut causer. Il s'agit d'une étude de recherche approfondie sur les effets de la conception de la parallaxe sur l'expérience utilisateur, il faudra donc un certain temps pour traiter et comprendre pleinement ce document. L'étude a pris deux groupes de personnes, tous deux ayant reçu des exemples de sites Web à explorer : la parallaxe et le défilement standard. Le résultat final n'était pas surprenant, les utilisateurs apprécient davantage le défilement parallaxe, mais cela se traduit par une confusion et des problèmes d'utilisation généraux en ce qui concerne l'attention. Vous devez toujours donner la priorité aux utilisateurs plutôt qu'aux ajouts fantaisistes à la conception de votre site Web. Si cela signifie embaucher un concepteur expert professionnel pour vous analyser, vous devez alors aller de l'avant avec cette idée, surtout si vous dirigez une opération commerciale à grande échelle. D'après notre propre expérience, les sites Web à petite échelle peuvent généralement utiliser le défilement parallaxe, et cela n'a pas un impact si important sur l'expérience utilisateur ou la convivialité générale.
Maintenant que nous avons couvert ces deux sujets, nous pouvons commencer à apprendre quelques techniques et méthodes sur la façon de mettre en œuvre le défilement de parallaxe et de créer vos effets de défilement de parallaxe. Le premier tutoriel vient de Petr Tichy, qui fait du front-end depuis de nombreuses années et est un professionnel établi dans ce domaine. Vous apprendrez la phase de configuration initiale de la parallaxe, comment ajouter des effets d'animation qui sont également intégrés à la parallaxe et comment allouer un timing approprié pour chacune des animations. Le didacticiel est un peu complexe à certains égards, il s'adresse donc aux développeurs intermédiaires qui ont des connaissances préalables en JavaScript. Dans le même didacticiel, vous trouverez un lien vers l'un des didacticiels précédents de Petr sur la parallaxe, qui est beaucoup plus convivial pour les débutants.
Ian Yates a écrit ce didacticiel plus tôt dans l'année, et il s'agit peut-être de l'un des didacticiels les plus récents sur ce sujet que nous présenterons dans cette collection de didacticiels sur la parallaxe. Ian adopte l'approche consistant à s'inspirer d'un autre site Web qui utilise une excellente combinaison d'effets de parallaxe et essaie de le recréer lui-même. La seule chose, il parle principalement de conceptions en vedette qui ont des fonctionnalités de parallaxe, et mentionne un petit extrait sur la façon de créer un effet d'arrière-plan unique en utilisant JS et CSS.
Les clients n'ont pas beaucoup de connaissances sur les normes de conception, les clients ont tendance à ne se soucier que des tendances et des choses comme rendre un site Web incroyablement cool et complètement unique à tout ce qui pourrait être appelé concurrence. Si vous travaillez avec de tels clients, un tutoriel concis sur la façon de créer des effets de défilement uniques sur un design va être essentiel, et je pense que nous en avons un ici qui va faire le travail, juste comme ça. Vous apprendrez à structurer du code HTML5 stylisé avec CSS3, puis intégré dans un effet de parallaxe à l'aide de jQuery.
Le didacticiel de Script Tutorials a déjà atteint plus de 17 000 concepteurs et développeurs, ce nombre nous a intrigués, car cela signifie que le didacticiel doit vraiment fonctionner et doit fournir une expérience de mouvement de parallaxe fluide. Après quelques tests locaux, il semble que ce soit effectivement le cas. L'approche de parallaxe habituelle du HTML et du CSS, et tout ce que vous avez vraiment à faire est de copier et coller les deux codes dans votre conception et vous devriez être prêt à partir. Cependant, nous pouvons imaginer que cela soit un peu plus difficile dans les situations où vous devez l'implémenter pour des conceptions personnalisées, nous devons donc peut-être continuer à rechercher des didacticiels généraux qui peuvent vous aider.
Andy Shora pourrait peut-être nous aider à cet égard. Ses principaux objectifs sont de créer un effet de parallaxe qui ne compromet pas les performances du site Web, ce qui est réalisé en minimisant le nombre d'interactions DOM pour les événements de défilement et en utilisant l'accélération matérielle pour augmenter les performances des appareils mobiles. En fait, c'est un autre guide pour vraiment en savoir plus sur la façon dont les appareils mobiles interagissent avec la parallaxe, et ce qui peut être fait pour pousser les performances maximales sans perdre en qualité ou en attrait de conception. Vous explorerez deux extraits différents de jQuery qui sont utilisés pour créer des effets de parallaxe optimaux en termes de performances sur n'importe quelle conception de site Web.
Parce que la parallaxe est une technique si nouvelle (enfin, quelques années maintenant, mais quand même), elle présente de nombreux défis pour les développeurs qui souhaitent implémenter la parallaxe pour les navigateurs Web plus anciens, le processus n'est pas aussi simple et nécessite un un peu de compréhension de la façon dont les anciens navigateurs fonctionnent avec les nouvelles fonctionnalités Web. Le didacticiel poursuit en montrant de bons et de mauvais exemples entre des sites Web de parallaxe et ce qui peut être appris au cours du processus d'analyse. Il parle également de différents angles de parallaxe, tels que vertical et horizontal - les possibilités de la conception Web moderne ont vraiment évolué à un nouveau niveau. Vous découvrirez les bibliothèques JavaScript les plus utiles liées à la parallaxe, et chacune d'entre elles a des documentations et des tutoriels individuels disponibles en ligne, nous voulions partager ces bibliothèques nous-mêmes, mais le montant n'était pas trop important, vous en apprendrez donc plus sur tous dans ce tutoriel. C'est une ressource vraiment merveilleuse pour tout ce qui concerne la parallaxe, en particulier les interactions et les différentes façons d'obtenir un effet de défilement dynamique.
Comment créer un effet de parallaxe simple
Sara Vieira, bien qu'elle soit une excellente développeuse, ne s'embarrasse pas de code ou de terminologie complexe lorsqu'il s'agit de sujets comme la parallaxe. Elle préfère créer une technique simple pour obtenir le résultat souhaité et vous permet d'expérimenter le code qu'elle a partagé à votre rythme. Vous expérimenterez les trois grands : JS, HTML et CSS. La meilleure façon d'expérimenter serait sur un serveur Web local ou dans un dossier séparé sur votre serveur en direct, et de voir quel type de résultats vous pouvez obtenir de cette façon.
L'effet de parallaxe avec jQuery
Ce qui est bien avec ce tutoriel, c'est qu'il est déjà implémenté dans la page que vous consultez, donc il n'y a vraiment pas besoin d'expliquer dans un texte écrit, mais plutôt de donner un exemple sous forme de code en direct. Vous pouvez récupérer l'extrait HTML/CSS et le combiner avec l'extrait jQuery pour obtenir le même effet de parallaxe que la page que vous consultez. Avec un petit extrait de description (commentaire) disponible sur le côté droit de chacun des extraits de code.
En fin de compte, vous voulez vous fier autant que possible au CSS. CSS signifie de bien meilleures performances et moins de tracas avec des langages dynamiques comme jQuery. Ce que vous avez ici est un simple extrait CSS qui parallaxera vos conteneurs de contenu et rendra l'expérience de contenu beaucoup plus riche, avec une excellente référence de performance.
Stellar.js est une bibliothèque JavaScript assez populaire créée pour vous aider à ajouter rapidement des effets de parallaxe à vos sites Web. Bien que la bibliothèque n'ait pas connu beaucoup de développement au cours de la dernière année, elle est toujours activement utilisée par les développeurs et les concepteurs de toute la communauté. Vous explorerez le processus d'intégration de Stellar dans vos conceptions afin que certains éléments bénéficient de l'effet de parallaxe. Une bibliothèque est certainement un choix sûr pour intégrer de telles fonctionnalités dynamiques, car elle peut être facilement détachée du flux de travail de développement principal si nécessaire.
Utiliser Parallax pour faire ressortir votre site WordPress
La parallaxe est utilisée dans tant de contextes différents, il faut se demander ce qui a incité les utilisateurs à revenir à cette fonctionnalité passionnante, et pour beaucoup - cette raison a été la capacité de raconter de meilleures histoires, grâce à l'utilisation d'animations à défilement fluide qui peuvent prendre le lecteur d'une partie de l'histoire à l'autre, avec ce merveilleux mouvement fluide. Et qu'en est-il des blogs WordPress, comment ajouter de la parallaxe à WordPress sans utiliser de thèmes uniques qui prennent en charge la fonction ? Si c'est votre seule question brûlante, vous trouverez toutes les réponses dans le tutoriel suivant. Nous pensons qu'il s'agit du didacticiel de parallaxe le plus complet pour les blogs WordPress, et nous espérons que vous ajouterez bientôt ces superbes effets à vos propres blogs. Ignorez l'introduction si vous savez déjà ce que fait la parallaxe, une bonne partie du guide est consacrée à l'explication détaillée de la parallaxe, évitez donc tout ce qui donne l'impression que vous le savez déjà.
Qu'est-ce que Wix ? C'est la principale plate-forme de création de sites Web gratuite sur le Web, et ces gars sont en affaires depuis toujours ! Ce n'est pas vraiment un didacticiel, mais plutôt un avertissement pour les développeurs qui travaillent avec des clients et le type de clients qui préfèrent utiliser des plates-formes comme Wix pour héberger et créer leurs sites Web. Désormais, les utilisateurs de Wix peuvent également profiter de l'effet de parallaxe, et ils ont beaucoup de bonnes démos à vous montrer, afin de vous attirer. Nous plaisantons bien sûr, l'utilisation de Wix peut faire gagner beaucoup de temps pour avoir à créer un design unique, et la demande de sites Web n'a pas diminué, même si les clients pourraient eux-mêmes réaliser ces superbes conceptions s'ils prenaient un peu plus de temps pour se renseigner sur la plate-forme qu'ils utilisent pour héberger leur site Web. N'ayez pas peur d'offrir aux nouveaux clients la possibilité d'héberger leur site Web avec Wix ou toute autre plate-forme de création de site Web. C'est un pas dans la bonne direction en ce qui concerne la maintenance du site Web, et dans certains cas ; les performances aussi.
Parallaxe paysage avec CSS
Vous avez de nombreux choix pour la conception de parallaxe, donc tant que vous savez ce que vous faites en tant que concepteur et développeur front-end, vous pouvez transformer n'importe quoi en un effet de parallaxe, même reproduire un paysage en utilisant rien d'autre qu'un peu de CSS et jQuery la magie! Dave Chenell vous guide à travers les étapes nécessaires pour créer un effet d'aménagement paysager en parallaxe.
Comment créer une illustration de parallaxe multicouche avec CSS et Javascript
L'effet de parallaxe en couches consiste à utiliser deux images l'une sur l'autre pour dérouler un scénario visuel particulier. Cela améliorera encore l'expérience visuelle que vos utilisateurs auront avec votre conception/site Web, et c'est également une excellente occasion d'explorer les possibilités de l'art dessiné à la main et son incorporation dans la conception de sites Web, car la plupart du temps, vous voudrez utiliser quelque chose qui peuvent se superposer et prendre tout leur sens, comme vous le verrez dans l'aperçu de la démo.
Sites Web CSS Parallax purs
Joli tutoriel d'introduction sur la création d'un effet de défilement solide en utilisant la parallaxe, en n'utilisant que du CSS natif.
Recréer l'effet Firewatch Parallax
La parallaxe a été appelée de nombreux noms, et il y a certainement un groupe fidèle de concepteurs / développeurs qui détestent absolument la tendance de la parallaxe, mais que pouvez-vous faire, cela semble fonctionner pour tant de personnes, alors pourquoi s'arrêter à produire des tutoriels et du contenu sur comment rendre cet effet possible en temps réel. Le didacticiel que nous avons ici va recréer un effet particulier du site Web Firewatch, pour créer une sorte d'effet de paysage combiné avec des éléments tombants pour permettre un déploiement supplémentaire du contenu. Cela semble délicat au début, mais Hamish (auteur du tutoriel) prend bien soin de tout expliquer étape par étape.
Quelles que soient vos exigences, nous pensons que les didacticiels que nous avons répertoriés couvriront absolument tous les aspects liés à cette tendance émergente en matière de conception de sites Web. Des effets simples aux effets optimisés en termes de performances, en passant par des approches uniques pour offrir une expérience de contenu dont on se souviendra pendant plus de quelques minutes. Une grande partie de ce qui se passe dans la conception Web se résume à l'inspiration et à la façon d'inspirer les utilisateurs et les lecteurs avec des rebondissements uniques obtenus grâce à la maîtrise de la conception.