Les longs sites de défilement sont devenus une tendance très commune en matière de conception Web. Les sites de défilement de la parallaxe, où les images bougent pour produire un effet de parallaxe, constituent l’un des sous-types les plus intéressants. Au fur et à mesure que l'utilisateur fait défiler la page, les animations sont déclenchées et, dans l'ensemble, le site, s'il est mis en œuvre correctement, est revisité.
Faire un site de défilement de parallaxe est souvent fastidieux, car il nécessite une connaissance approfondie de CSS, Javascript et une bonne conception web. Voici une liste des meilleurs plugins de défilement Parallax qui facilitent non seulement la création de sites de défilement de parallaxe, mais également une bibliothèque bien dotée d'effets de parallaxe, facilitant et accélérant le développement d'une page Web de bonne qualité. .
AVERTISSEMENT : Avant de commencer, notez que l'utilisation de ces plugins nécessite des connaissances des technologies Web (HTML / CSS / Javascript). La plupart des plugins listés utilisent jquery. Par conséquent, la connaissance de Jquery peut également être nécessaire.
Plugins de défilement de parallaxe
1. ScrollMagic
ScrollMagic est l’un des plugins jquery les plus populaires et les plus riches en fonctionnalités. C’est une bibliothèque javascript qui vous permet de créer des effets de défilement apparemment magiques. En utilisant ScrollMagic, vous pouvez animer en fonction de votre position de défilement. Cela signifie que vous pouvez réparer, déplacer ou animer des éléments HTML au fur et à mesure de votre défilement, et ajouter facilement des effets de parallaxe à votre site Web. Il est hautement personnalisable et léger (6 Ko lorsque gzippé). Parmi les autres plugins de parallaxe, Scroll Magic dispose de la meilleure documentation et des meilleures ressources externes. Il est parfaitement compatible avec le mobile aussi.
ScrollMagic a beaucoup d'exemples énumérés. Consultez-les pour trouver l'inspiration et les conseils nécessaires pour utiliser cette bibliothèque.
Sur:
Page d'accueil: //janpaepke.github.io/ScrollMagic/
Créé par: Jan Paepke
Installation:
1. CDN:
2. Télécharger depuis Github
2. skrollr
skrollr est une bibliothèque légère et pure en Javascript et CSS, sans jQuery. Il s’agit essentiellement du 'Scroll Magic simplifié pour CSS'. Pour utiliser skrollr, vous n'avez pas besoin de connaître Javascript ni aucun jQuery. HTML et CSS suffisent. skrollr utilise des attributs de données pour animer tous les éléments HTML de votre choix. L'un des principaux inconvénients de skrollr est que les animations ne fonctionnent que pendant le défilement de la page. Sinon, tous les effets sont mis en attente. skrollr vous permet d’animer toutes les propriétés CSS de vos éléments HTML.
Sur:
Page d'accueil: //prinzhorn.github.io/skrollr/
Créé par: Prinzhorn
Installation: Télécharger depuis Github
3. pagePiling.js 
Page Piling est un plugin jQuery qui vous permet de créer votre site Web en différentes sections empilées les unes sur les autres. Lors du défilement ou en accédant à l’URL, chaque section est révélée dans une animation glissante et nette. pagePiling.js est compatible avec toutes les plateformes - ordinateurs de bureau, tablettes et mobiles - et fonctionne avec la plupart des navigateurs. Il se dégrade gracieusement sur les navigateurs plus anciens qui ne supportent pas ses animations (comme IE 7). Pour utiliser le plugin, vous devez inclure un CSS et un fichier Javascript dans votre code HTML. pagePiling.js est initialisé par la fonction (document) .ready:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Pour les initialisations plus avancées, consultez le fichier README.md.
Sur:
Page d'accueil: //alvarotrigo.com/pagePiling/
Créé par: alvarotrigo
Installation: Télécharger depuis Github
4. Alton
Alton est un plugin jQuery 'Scroll-jacking to us'. Le portage par défilement signifie que le défilement natif de votre navigateur est désactivé au lieu du défilement ciblé qui, une fois lancé (par la molette de la souris ou le pavé tactile), vous amène au prochain point vertical de l’écran ou au sommet du conteneur suivant.
Alton autorise trois types de fonctionnalités distinctes, appelées "Hero", "Bookend" et "Standard". Standard vous permet d'utiliser le défilement complet de la page, avec chaque section de 100% de hauteur. Un parchemin fait apparaître la section suivante ou la section précédente. Bookend vous permet de créer une expérience de type serre-livre, tandis que Hero vous permet de faire défiler uniquement la section "Hero", le reste de la page présentant un défilement natif (réactivé).
Sur:
Page d'accueil: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Créé par: paper-leaf
Installation: Télécharger depuis Github
5. Stellar.js
Stellar est un plugin jQuery grâce auquel vous pouvez facilement ajouter des effets de défilement de parallaxe. Pour exécuter, vous devez d’abord exécuter la fonction $ .stellar (). Les paramètres d'animation pour des éléments individuels peuvent être configurés à l'aide d'attributs de données sur cet élément.
Stellar vous permet même d'avoir des arrière-plans de parallaxe, qui sont des arrière-plans qui se repositionnent en défilement. Une des fonctionnalités les plus utiles de Stellar.js est la compensation.
Tous les éléments retrouveront leur position d'origine lorsque leur parent décalé rencontrera le bord de l'écran, plus ou moins votre propre décalage optionnel. Cela vous permet de créer très facilement des motifs complexes de parallaxe. (Documentation stellaire)
Sur:
Page d'accueil: //markdalgleish.com/projects/stellar.js/
Créé par: Mark Dalgeish
Installation: Télécharger depuis Github
6. multiScroll.js
Ce plugin est créé par le même développeur (alvarotrigo) qui a créé le plugin pagePiling.js. Le défilement multiple consiste essentiellement à vous permettre de créer un effet dans lequel chaque section de page se charge en deux parties divisées qui se glissent en place lors du chargement de la page. Consultez la page d'accueil pour voir à quoi cela ressemble sur votre navigateur. multiScroll.js vous permet de définir la vitesse de défilement, l’accélération, l’option de défilement au clavier, ainsi que de nombreuses autres propriétés, de manière à pouvoir personnaliser l’effet.
Sur:
Page d'accueil: //alvarotrigo.com/multiScroll/
Créé par: alvarotrigo
Installation: Télécharger depuis Github
7. ScrollMe
ScrollMe est un plugin pour ajouter des effets de défilement de parallaxe simples à votre page. Il peut redimensionner, faire pivoter, traduire et modifier l'opacité des éléments de la page lorsque vous faites défiler l'écran. ScrollMe ne nécessite pas de Javascript, et seule une connaissance en CSS suffit. En ajoutant la classe «animateme» et les attributs de données requis, vous pouvez animer n’importe quel élément HTML. ScrollMe est mieux utilisé pour ajouter des effets CSS. Il est léger et toutes les animations sont fluides, à condition de les utiliser avec modération.
Sur:
Page d'accueil: //scrollme.nckprsn.com/
Créé par: Nick Pearson
Installation: Télécharger depuis Github
8. Scroll Parallax
Parallax Scroll est un plugin jQuery facile à utiliser qui vous permet de créer l’effet de défilement d’image parallaxe que vous pouvez trouver sur des sites comme Spotify. Son utilisation est assez simple: il vous suffit de spécifier les classes CSS requises pour les détenteurs d'images. Plutôt que d'utiliser Pour utiliser ce plugin, vous devez utiliser des éléments pour lesquels une image d'arrière-plan est spécifiée (à l'aide de la propriété CSS `background-image`. Vous pouvez les rendre réactifs à l'aide de requêtes CSS @media.
Sur:
Page d'accueil: //parallax-scroll.aenism.com/
Créé par: Aen
Installation: Télécharger depuis Github
9. Jarallax
Jarallax est une bibliothèque CSS et Javascript spécialisée dans les effets de défilement de parallaxe. Jarallax est configuré avec Javascript (pas de jQuery, juste de la vanille pure JS). Il prend en charge les fonctionnalités de défilement lissé, d'accélération et d'animation de parallaxe. Jarallax est pris en charge par la plupart des navigateurs, sur toutes les plateformes. Le site Web de Jarallax contient une excellente documentation sur la manière de personnaliser Jarallax en fonction de vos besoins. Jarallax propose également des didacticiels vidéo expliquant comment configurer Jarallax pour votre site Web et comment commencer.
Sur:
Page d'accueil: //www.jarallax.com/
Créé par: Jarallax
Installation: Télécharger depuis le site Web de Jarallax
10. Superscrollorama
Superscrollorama est un plugin basé sur jQuery qui prend en charge les animations de défilement. Il est alimenté par TweenMax et le Greensock Tweening Engine, qui améliore les performances et la fluidité de l'animation. Les animations Superscrollorama sont appelées via jQuery et vous pouvez également utiliser la plupart des fonctions TweenMax.js. Malheureusement, ces animations ne sont pas entièrement prises en charge par les appareils mobiles (car les appareils à écran tactile gèrent le défilement de manière différente). Cependant, avec la méthode setScrollContainerOffset, vous pouvez accéder aux effets Superscrollorama sur des appareils mobiles.
Voici le code pour faire ceci:
.setScrollContainerOffset(x, y)
(x: le décalage x du conteneur de défilement, y: le décalage x du conteneur de défilement)
Sur:
Page d'accueil: //johnpolacek.github.io/superscrollorama/
Créé par: johnpolacek
Installation: Télécharger depuis Github
VOIR AUSSI: 10 meilleurs générateurs de sites statiques
