20 tutoriels de défilement de parallaxe avec jQuery et HTML5 - 2017

La parallaxe est utilisée depuis la fin des années 40, et plus récemment utilisée dans des industries comme les jeux, pour créer des expériences de jeu uniques pour tous. Sérieusement, la parallaxe peut sembler une nouveauté pour les concepteurs, mais ce concept nous accompagne depuis si longtemps déjà, que les concepteurs ne font que rattraper leur retard et établissent clairement une tendance autour de cet effet de défilement. Pour mieux affiner la description de la parallaxe, il s'agit d'une technique unique dans la conception Web qui permet aux composants individuels de la page Web de défiler aux côtés de l'utilisateur à divers 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 :

• Superbes thèmes WordPress de défilement de parallaxe
• Modèles de sites Web de parallaxe HTML5/CSS3
• Thèmes WordPress gratuits de défilement de parallaxe
• Où trouver des thèmes WordPress Premium et gratuits Parallax
• Nouveaux modèles WordPress avec effet de défilement de parallaxe

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 tutoriels conviviaux pour les nouveaux arrivants en conception Web, mais aussi sur des éléments intermédiaires pour vraiment expliquer les fondements de la parallaxe et son fonctionnement.

Sites Web à défilement parallaxe et référencement

Avant d'entrer dans nos tutoriels et tout cela, il y a deux aspects à examiner de plus près, et l'un d'eux est l'impact du défilement de parallaxe sur l'optimisation des moteurs de recherche. L'utilisation de fonctionnalités de conception dynamique va certainement avoir 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 en détail. 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 d'essayer de créer un effet de parallaxe fonctionnel sur votre conception, d'implémenter d'abord la méthodologie de référencement, puis de vous concentrer 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 permet également aux robots pour traiter le contenu.

Les effets du défilement de parallaxe sur l'expérience utilisateur dans la conception Web

Le deuxième aspect est l'expérience utilisateur de la conception de parallaxe, et si elle convient à toutes les conceptions, et quel type de problèmes cela peut éventuellement causer. Il s'agit d'une étude de recherche approfondie réalisée sur les effets de la conception de parallaxe sur l'expérience utilisateur, notez donc qu'il faudra un certain temps pour traiter et comprendre pleinement cet article. L'étude a porté sur deux groupes de personnes, qui ont tous deux 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 de parallaxe, mais cela entraîne un coût de confusion et des problèmes d'utilisation générale en ce qui concerne l'attention. Vous devez toujours donner la priorité aux utilisateurs plutôt qu'aux ajouts sophistiqués à la conception de votre site Web. Si cela signifie embaucher un concepteur expert professionnel pour effectuer l'analyse à votre place, vous devez 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 s'en tirer avec le défilement parallaxe, et cela n'a pas un grand impact sur l'expérience utilisateur ou la convivialité générale.

Tutoriel de défilement de parallaxe simple

Maintenant que nous avons abordé ces deux sujets, nous pouvons commencer à apprendre des techniques et des méthodes réelles sur la façon de mettre en œuvre le défilement de parallaxe et de créer vos propres effets de défilement de parallaxe. Le premier tutoriel vient de Petr Tichy, qui travaille en 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 chacun des animés. 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 Parallax, qui est beaucoup plus convivial pour les débutants.

Inspiration de conception de sites Web : Scrollin', Scrollin', Scrollin'

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 de parallaxe. Ian adopte l'approche de 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 à l'aide de JS et CSS.

Tutoriel de défilement de parallaxe : comment créer un site Web de parallaxe

Les clients n'ont pas beaucoup de connaissances sur les normes de conception, les clients ont seulement tendance à se soucier des tendances et des choses comme rendre un site Web incroyablement cool et complètement unique à tout ce qui pourrait être qualifié de concurrence. Si vous travaillez avec de tels clients, un didacticiel 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é à un effet de parallaxe à l'aide de jQuery.

Effet de défilement de parallaxe simple

L'effet que vous allez recréer ici est destiné aux conceptions simples. Un effet de parallaxe traditionnel qui fait défiler le contenu visuel le long de la page, sans donner l'impression que les images sont statiques, mais les rend plutôt plus dynamiques et interactives avec le design. De nos jours, de nombreux thèmes WordPress utilisent également cette technique de parallaxe, et nous ne pouvons pas dire qu'elle n'a pas été couronnée de succès, car elle l'a été. Vous allez créer des « sections » HTML5 qui contiennent le contenu et utiliser du CSS3 simple pour que l’effet fonctionne en action. En utilisant simplement la combinaison HTML5 + CSS3, vous économisez beaucoup de points de performance en termes d'intégration native au navigateur.

Tutoriel de défilement de parallaxe

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 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 de HTML et CSS, et tout ce que vous avez vraiment besoin de 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.

Comment implémenter des effets de parallaxe sur le défilement en utilisant CSS et jQuery

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 obtenu 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, il s'agit d'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 du design. Vous explorerez deux extraits différents de jQuery qui sont utilisés pour créer des effets de parallaxe optimaux sur les performances de toute conception de site Web.

Le guide ultime du défilement de parallaxe

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 du fonctionnement des anciens navigateurs avec les nouvelles fonctionnalités Web. Le didacticiel montre ensuite de bons et de mauvais exemples entre les sites Web de parallaxe et ce qui peut être appris au cours du processus d'analyse. Il aborde également les différents angles de parallaxe, tels que la verticale et l'horizontale - 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 didacticiels individuels disponibles en ligne, nous voulions partager ces bibliothèques nous-mêmes, mais la quantité n'était pas trop importante, vous découvrirez donc 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 manières d'obtenir un effet de défilement dynamique.

Comment créer un effet de parallaxe simple

Sara Vieira, bien qu'étant une excellente développeur, ne s'embarrasse pas de code ou de terminologie complexes lorsqu'il s'agit de sujets tels que 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 visualisez, donc vraiment il n'y a pas vraiment besoin d'expliquer par é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 visualisez. Avec un petit extrait de description (commentaire) disponible sur le côté droit de chacun des extraits de code.

Créer des effets de défilement de parallaxe avec CSS

En fin de compte, vous voulez vous fier au CSS autant que possible. CSS signifie de bien meilleures performances et moins de tracas liés aux 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.

Une introduction au défilement de parallaxe à l'aide de Stellar.js

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 définitivement un choix sûr pour brancher 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 apparaître votre site WordPress

La parallaxe est utilisée dans tellement de contextes différents, on peut se demander ce qui a poussé 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 prenant en charge la fonction ? Si c'est votre seule question vraiment 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. Sautez 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, alors évitez tout ce qui semble déjà être au courant.

Captivez les visiteurs de votre site avec le défilement de parallaxe

Qu'est-ce que Wix ? C'est la principale plate-forme gratuite de création de sites Web sur le Web, et ces gars-là sont en affaires depuis toujours ! Ce n'est pas vraiment un tutoriel, 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 plateformes 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. la demande de sites Web n'a pas diminué, même si les clients pourraient eux-mêmes réaliser ces superbes designs 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 ; performances aussi.

Parallaxe de paysage à l'aide de CSS

Vous avez beaucoup de 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 effet de parallaxe, même reproduire un paysage en utilisant uniquement 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 faire 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 Pure CSS Parallax

Joli tutoriel d'introduction sur la création d'un effet de défilement solide en utilisant la parallaxe, en utilisant uniquement du CSS natif.

Recréer l'effet de parallaxe Firewatch

La parallaxe a été appelée de nombreux noms, et il existe très 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 beaucoup, 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é à 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.

Tutoriels de défilement de parallaxe avec des exemples CSS3, HTML5 et jQuery

Quelles que soient vos exigences, nous pensons que les didacticiels que nous avons répertoriés couvriront absolument tous les aspects de cette tendance émergente en matière de conception de sites Web. Des effets simples aux effets optimisés pour les performances, en passant par des approches uniques pour offrir une expérience de contenu dont vous vous souviendrez plus de quelques minutes. Une grande partie de ce qui se passe dans la conception de sites Web se résume à l'inspiration et à la manière d'inspirer les utilisateurs et les lecteurs avec des rebondissements uniques obtenus grâce à la maîtrise de la conception.