hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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.

Pour voir une démo en direct, jetez un coup d'œil sur le site principal ou parcourez le repo 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 à 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

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

(Conseils techniques et de conception)

Comment afficher du texte sur une image avec le mode de mélange-mélange CSS3

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'

(Conseils techniques et de conception)