Rellax.js - Fonctionnalités Parallax gratuites à l'aide de JavaScript Vanilla
Le défilement de parallaxe semble incroyable quand il est bien fait. Ce n'est pas une fonctionnalité que vous voulez sur tous les sites Web, mais pour les sites créatifs et les pages de destination, les éléments de parallaxe attirent l'attention rapidement .
Il existe des tonnes de bibliothèques JavaScript gratuites pour les effets de défilement animés, mais beaucoup sont gonflées ou trop complexes pour certaines personnes.
C'est pourquoi je recommande Rellax.js pour vos besoins en parallaxe. C'est un plugin open source gratuit construit sur JavaScript, donc il n'a pas de dépendances .
Par défaut, il suffit d'un simple appel de fonction pour affecter la classe parallaxe aux éléments de la page. Ensuite, lorsque vous faites défiler, ces éléments restent fixes et se déplacent avec le point de vue de l'utilisateur.
Vous pouvez personnaliser ces éléments pour qu'ils apparaissent plus près, plus loin ou derrière les éléments de la page. Cela crée l' 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'installation entière utilise une seule fonction JS ciblant la classe .rellax comme suit :
var rellax = nouveau Rellax ('.rellax');
Notez que vous pouvez utiliser à peu près toutes les classes que vous voulez, mais l'exemple de démonstration utilise .rellax
pour des raisons de simplicité.
De là, vous enveloppez simplement vos éléments de parallaxe dans une div avec la classe .rellax
et définissez l'attribut speed . Cela fonctionne via l'attribut personnalisé data-rellax-speed
qui accepte les valeurs comprises entre -10 et +10.
Voici un exemple de code HTML sur la page de démonstration:
Je suis extra lent et lisse
Vous pouvez également centrer les éléments sur la page et personnaliser les positions des éléments via CSS.
Rellax ne vous dit pas comment structurer la page ou comment définir des éléments CSS sur votre page. Tout ce qu'il fait est de créer un effet de défilement de parallaxe naturelle avec JavaScript pur. Comment vous utilisez cela est totalement à vous.

Et le meilleur de tous, l'équipe est toujours prête à accepter les demandes d'extraction, donc si vous remarquez des problèmes ou si vous avez des suggestions de fonctionnalités, envoyez simplement un petit message à l'équipe.

20 Tech Knockoffs qui vous laissera abasourdi
Pensez à toutes les marques de matériel populaires dans la technologie en ce moment. Les pommes et Sonys qui ont l'honneur distinct d'être considéré comme une marque de luxe. Tout le monde en veut un et n'importe qui, n'importe qui, achèterait et les montrerait à ses pairs, créant un appel. Malheu

Comment afficher du texte sur une image avec le mode de mélange-mélange CSS3
Les arrière-plans d'image sont magnifiques derrière les grands textes d'affichage. Cependant, sa mise en œuvre CSS n'est pas si simple. Nous pouvons utiliser le background-clip: text; propriété, cependant c'est toujours une fonctionnalité expérimentale sans support de navigateur suffisant.L'