Contenu
- 01. Rendez-le mobile convivial
- 02. Ne l'utilisez pas pour le plaisir
- 03. Rendez-le amusant
- 04. Faites-lui raconter une histoire
- 05. Rendez-le attrayant
- 06. Exploiter les appels à l'action
- 07. Ajoutez de la superposition et de la profondeur
- 08. N'en faites pas trop
- 09. Rappelez-vous IE
- 10. Pré-chargement des actifs
- Aimait ça? Lisez-les!
Le terme «parallaxe» fait référence au mouvement apparent d’objets vus de différentes positions. La technique était à l'origine utilisée dans les jeux vidéo 2D où les images d'arrière-plan se déplaçaient plus lentement que les images de premier plan, créant une illusion de profondeur. Qui aurait pensé que quelque chose de popularisé en 1982, le jeu d'arcade Moon Patrol, deviendrait une tendance majeure de la conception Web 30 ans plus tard!
Les sites Web Parallax ont parcouru un long chemin depuis le simple site à deux couches. Avec HTML5, CSS3 et les navigateurs modernes, de nombreux sites de parallaxe utilisent une animation multiplane, introduisent de nouveaux éléments et créent un mouvement au-delà de l'axe y en utilisant le défilement. Si vous n'êtes pas familier, consultez ces exemples frappants de sites Web à défilement parallaxe.
Créer l'un de ces chefs-d'œuvre visuellement interactifs peut être accablant, voici donc 10 conseils qui vous aideront à créer vos sites Web à défilement parallaxe de la bonne manière.
01. Rendez-le mobile convivial
Il n'est pas surprenant qu'avec l'augmentation de l'utilisation d'Internet via les appareils mobiles, les concepts de conception tels que la conception mobile d'abord et la conception Web réactive sont devenus très populaires.
Actuellement, la majorité des sites Web à défilement parallaxe ne sont pas compatibles avec les appareils mobiles - y compris les grands noms comme le roman graphique Peugeot illustré ci-dessus. Mais étant donné la tendance à l'utilisation du Web mobile, cette approche sera de plus en plus intenable.
02. Ne l'utilisez pas pour le plaisir
Le défilement parallaxe est une technologie très cool, mais essayez de ne pas l'utiliser pour le plaisir. Le site de Green Splash Design, illustré ci-dessus, est bien conçu et remplit parfaitement son rôle, mais son utilisation du défilement parallaxe n’ajoute pas grand-chose à l’expérience utilisateur.
03. Rendez-le amusant
Le public aime se divertir et le défilement parallaxe est souvent utilisé pour donner du plaisir aux utilisateurs. La collection d'automne Kystalrae - où la tenue du modèle donné change à mesure que l'utilisateur fait défiler vers le bas - est un excellent exemple d'utilisation divertissante de la technique.
04. Faites-lui raconter une histoire
Le défilement parallaxe peut être utilisé pour emmener vos visiteurs dans un voyage à travers une chronologie ou une histoire. Le site de l'agence numérique inTacto est un excellent exemple de défilement de parallaxe utilisé pour raconter l'histoire d'une entreprise de manière amusante et engageante.
05. Rendez-le attrayant
Le site Web Activate Drinks engage son public avec une utilisation intelligente des animations et du défilement de parallaxe. Garder l'utilisateur sur votre site Web a toujours été un défi pour les concepteurs. Mais le défilement de parallaxe peut renforcer l'attrait de la curiosité naturelle si l'effet visuel est amusant, séduisant et / ou hypnotique.
06. Exploiter les appels à l'action
Nous faisons défiler et quelque chose se passe. Tirer parti des commentaires instantanés lors de l'interaction avec les sites Web à défilement parallaxe est un excellent moyen d'attirer les gens sur votre site et de les attirer vers vos appels à l'action.
Par exemple, le site Web du gadget de fitness Tinke attire les visiteurs vers son "bouton suivant" avec des images du gadget interagissant avec le défilement de parallaxe. Le site Web guide également parfaitement le visiteur vers l’appel à l’action «Achetez maintenant» au bas de la page.
07. Ajoutez de la superposition et de la profondeur
Le propre site de Madwell a remporté un site awwwards du jour pour une bonne raison, car son site Web démontre une utilisation parfaite des couches et de la profondeur pour un site à défilement parallaxe. Remarquez les images floues de premier plan se déplaçant rapidement par rapport aux images d'arrière-plan claires et lentes.
Comme indiqué précédemment, l'art de la parallaxe consiste à créer une illusion de profondeur. N'oubliez pas d'expérimenter et de ne pas abandonner!
08. N'en faites pas trop
Muffi a bombardé son site Web avec toutes sortes de fantaisie, et c'est définitivement une démonstration impressionnante de prouesses techniques et de belles images. Cependant, personnellement, je pense qu’ils sont allés un peu trop loin avec l’utilisation du défilement parallaxe. Lorsqu'il devient difficile de trouver le logo de l'entreprise et de comprendre exactement de quoi parle le site Web, vous devriez probablement vous interroger sur la surutilisation éventuelle de la technologie.
09. Rappelez-vous IE
C'est à juste titre une pratique courante pour les développeurs Web de faire des tests multi-navigateurs. Et c'est particulièrement important avec les sites Web à défilement parallaxe, car ils utiliseront probablement HTML5 et CSS3. HTML5 Boilerplate cam aide à prendre en charge la plupart des normalisations entre navigateurs et contient des correctifs pour Internet Explorer.
10. Pré-chargement des actifs
Un grand nombre de sites Web à défilement parallaxe impliquent une utilisation intensive de l'imagerie. Souvent, l'utilisation d'autres ressources multimédias peut également être à l'origine de gros téléchargements sur les sites de défilement parallaxe. La bande dessinée Soulreaper en est un excellent exemple, mais aussi un excellent exemple d'images et d'actifs de préchargement.
Mots: Josh Chan
Josh Chan est un spécialiste numérique pour Chromatix, une agence de conception Web et de marketing en ligne à Melbourne, en Australie. La conception Web et l'innovation Web sont ses passions, ainsi que du breakdance pendant son temps libre.
Aimait ça? Lisez-les!
- Comment créer une application
- Sélection de didacticiels Wordpress brillante
- Découvrez les prochaines étapes de la réalité augmentée
Avez-vous vu un excellent exemple de défilement parallaxe? Dites-le nous dans les commentaires!
