Rellax.js - Fonctionnalités gratuites de Parallax utilisant JavaScript vanille
Défilement parallèle semble incroyable quand c'est bien fait. Ce n'est pas une fonctionnalité que vous voudrez sur tous les sites Web, mais pour les sites de création et les pages de destination, les éléments de parallaxe attirer l'attention rapidement.
Il existe des tonnes de bibliothèques JavaScript gratuites pour effets de défilement animés mais beaucoup sont gonflés ou tout simplement trop complexes pour certaines personnes.
C'est pourquoi je recommande Rellax.js pour vos besoins de parallaxe. C’est un plugin gratuit open source basé sur le code JavaScript de la vanille. n'a pas de dépendances.
Par défaut, il nécessite seulement un appel de fonction simple assigner la classe de parallaxe aux éléments de la page. Ensuite, lorsque vous faites défiler, ces éléments rester fixe et se déplacer avec le point de vue de l'utilisateur.
Vous pouvez personnaliser ces éléments pour qu'ils apparaissent plus proches, plus éloignés ou derrière les éléments de page. Cela crée le illusion de profondeur sur la page et tout fonctionne à travers une simple bibliothèque JavaScript.
Tout le code source de Rellax est disponible gratuitement sur GitHub si vous voulez télécharger une copie..
L'ensemble de la configuration utilise une seule fonction JS ciblant le .rellax classe comme si:
var rellax = new Rellax ('.rellax'); Notez que vous pouvez utiliser à peu près n'importe quelle classe que vous voulez, mais l'exemple de démonstration utilise .rellax pour la simplicité.
De là, vous venez Enveloppez vos éléments de parallaxe à l'intérieur d'une div avec le .rellax classe et définir l'attribut de vitesse. Cela fonctionne à travers le data-rellax-speed attribut personnalisé qui accepte les valeurs de -10 à +10.
Voici un exemple extrait à partir du code HTML de la page de démonstration:
Je suis extra lent et lisse
Vous pouvez également éléments centraux sur la page et personnaliser les positions des éléments via CSS.
Rellax ne vous explique pas comment structurer la page ni comment définir des éléments CSS sur votre page. Tout ce qu'il fait est créer un effet de défilement naturel de parallaxe avec du JavaScript pur. Comment vous utilisez ceci est totalement à vous.
Voir un démo en direct, jetez un coup d’œil sur le site principal ou parcourez le dépôt GitHub. Cela inclut de la documentation, ainsi que des liens vers des sites Web en direct utilisant Rellax.js.
Et le meilleur de tous, l'équipe est toujours prête à répondre aux demandes en tirant. Si vous remarquez des problèmes ou si vous avez des suggestions de fonctionnalités, envoyez simplement un message rapide à l'équipe..
