Faire défiler la parallaxe en toute simplicité avec StickyStack.js

Effets de parallaxe attirer l'attention rapidement. Ces effets garder certains arrière-plans en vue en faisant défiler la page. Vous trouverez le défilement de la parallaxe sur de nombreux sites Web et thèmes WordPress et ils constituent une grande partie de la conception Web moderne..

Vous pouvez aussi construire un style de parallaxe unique en utilisant le StickyStack.js brancher. Ses construit sur jQuery et garde chaque section de page principale collée vers le haut lorsque vous faites défiler.

Cela crée le illusion d'un site en couches où chaque page “des piles” sur l'autre. C'est vraiment cool et assez facile à installer soi-même.

Bien que ce soit assez facile à configurer, cela nécessite une certaine compréhension du développement frontal..

Vous devez d'abord créer des sections de page individuelles à l'intérieur du conteneur principal. De cette façon, vous aurez tout ce qui est inclus dans le HTML, vous pouvez donc tout cibler avec la fonction StickyStack jQuery.

Il vient également avec quelques options où vous pouvez personnaliser le conteneur parent, la éléments qui doivent empiler, et un possible boîte ombre si vous aimez cet effet.

Voici un échantillon de code depuis la page GitHub:

 $ ('. main-content-wrapper'). stickyStack (containerElement: '.main-content-wrapper', stackingElement: 'section', boxShadow: '0 -3px 20px rgba (0, 0, 0, 0.25)' ); 

Bien que cela n'ait pas été mis à jour depuis environ deux ans, c'est toujours un plugin très fiable. Il travaillé dans tous les navigateurs que j'ai testés (Chrome, Safari et Firefox) avec support pour toutes les versions de jQuery.

De plus, le fichier minifié est seulement 2 Ko qui est une taille décente pour un plugin.

Pour en savoir plus, visitez le référentiel principal et voyez ce que StickyStack peut offrir. Je pense que ça marche mieux sur sites Web d'une seule page ou pages de destination avec arrière-plans plein écran volumineux.

Vous pouvez également consulter un démo en direct sur CodePen si vous voulez voir à quoi cela ressemble sur un site actif.