Gadgetshowto
Les longs sites à défilement sont devenus une tendance de conception Web très courante. Les sites de défilement de parallaxe, où les images se déplacent pour produire un effet de parallaxe, sont 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, cela donne un nouveau look et une nouvelle sensation à tout site Web s'il est mis en œuvre correctement..
Créer un site à défilement parallaxe est souvent fastidieux car il nécessite une connaissance approfondie de CSS, Javascript et une bonne conception Web pour réussir. Voici une liste des Meilleurs plugins de défilement Parallax qui non seulement vous facilitent la création de sites de défilement de parallaxe, mais disposent également d'une bibliothèque d'effets de parallaxe bien dotée afin qu'il soit plus facile et plus rapide pour vous de développer une bonne page Web.
AVERTISSEMENT: Avant de commencer, notez que pour utiliser ces plugins, une certaine connaissance des technologies web (HTML / CSS / Javascript) est nécessaire. La plupart des plugins répertoriés utilisent jquery, donc une connaissance de Jquery peut également être nécessaire.
Plugins de défilement Parallax
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 corriger, déplacer ou animer des éléments HTML au fur et à mesure que vous faites défiler, quelle que soit la durée de votre choix, et également ajouter facilement des effets de parallaxe à votre site Web. Il est hautement personnalisable et est également léger (6 ko lorsqu'il est gzippé). Parmi les autres plugins de défilement de parallaxe, Scroll Magic a la meilleure documentation et les meilleures ressources externes. Il est également parfaitement compatible avec le mobile.
ScrollMagic a beaucoup d'exemples répertoriés. Consultez-les pour trouver de l'inspiration et des conseils sur l'utilisation de cette bibliothèque.
À propos:
Page d'accueil: http://janpaepke.github.io/ScrollMagic/
Créé par: Jan Paepke
Installation:
1. CDN:
2. Télécharger depuis Github
2. skrollr
skrollr est une bibliothèque Javascript et CSS pure et légère, sans jQuery impliqué. Il s'agit essentiellement du «Scroll Magic simplifié pour CSS». Pour utiliser skrollr, vous n'avez pas besoin de connaître Javascript ou n'importe quel jQuery. Le HTML et le CSS suffisent. skrollr utilise des attributs de données pour animer tout élément 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.
À propos:
Page d'accueil: http://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 qui s'empilent 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 soignée. pagePiling.js est compatible avec toutes les plates-formes - bureau, tablette et mobile - et fonctionne avec la plupart des navigateurs. Il se dégrade gracieusement sur les navigateurs plus anciens qui ne prennent pas en charge ses animations (comme IE 7). Pour utiliser le plugin, vous devez inclure un CSS et un fichier Javascript dans votre HTML. pagePiling.js est initialisé par la fonction (document) .ready:
$ (document) .ready (fonction ()
$ ('# pagepiling'). pagepiling ();
);
Pour des initialisations plus avancées, passez par le README.md.
À propos:
Page d'accueil: http://alvarotrigo.com/pagePiling/
Créé par: alvarotrigo
Installation: Télécharger depuis Github
4. Alton
Alton est un plugin jQuery 'scroll-jacking to us'. Le scrolling signifie que le défilement natif de votre navigateur est désactivé au profit du défilement ciblé qui, lorsqu'il est lancé (par la molette de votre souris ou le pavé tactile) vous amène au point vertical suivant sur l'écran, ou au haut du conteneur suivant.
Alton permet trois types de fonctionnalités distinctes, appelées «Hero», «Bookend» et «Standard». Standard vous permet d'utiliser le défilement pleine page, avec chaque section de 100% de hauteur. Un défilement fait apparaître la section suivante ou la section précédente. Bookend vous permet de créer une expérience de type serre-livres tandis que Hero vous permet de faire défiler uniquement la section `` Hero '', le reste de la page ayant (réactivé) le défilement natif.
À propos:
Page d'accueil: http://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 à travers lequel 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 les éléments individuels peuvent être configurés à l'aide des 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 au défilement. Les compensations sont l'une des fonctionnalités les plus utiles de Stellar.js.
Tous les éléments reviendront à leur position d'origine lorsque leur parent de décalage rencontre le bord de l'écran plus ou moins votre propre décalage facultatif. Cela vous permet de créer très facilement des motifs de parallaxe complexes. (Documentation stellaire)
À propos:
Page d'accueil: http://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. Ce que fait fondamentalement le défilement multiple, c'est qu'il vous permet de créer un effet où chaque section de page se charge en deux parties divisées qui glissent en place pendant le 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 du clavier et bien d'autres propriétés afin que vous puissiez personnaliser l'effet exactement comme vous en avez besoin..
À propos:
Page d'accueil: http://alvarotrigo.com/multiScroll/
Créé par: alvarotrigo
Installation: Télécharger depuis Github
7. ScrollMe
ScrollMe est un plugin pour ajouter de simples effets de défilement de parallaxe à votre page. Il peut mettre à l'échelle, faire pivoter, traduire et modifier l'opacité des éléments de la page au fur et à mesure que vous faites défiler vers le bas. ScrollMe ne nécessite aucun Javascript, et seules les connaissances CSS suffisent. 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, tant que vous les utilisez avec modération.
À propos:
Page d'accueil: http://scrollme.nckprsn.com/
Créé par: Nick Pearson
Installation: Télécharger depuis Github
8. Défilement de parallaxe
Parallax Scroll est un plugin jQuery facile à utiliser qui vous permet de créer l'effet de défilement d'image de parallaxe trouvé sur des sites comme Spotify. Il est assez simple à utiliser - spécifiez simplement les classes CSS requises pour les détenteurs d'images. Plutôt que d'utiliser balises, pour utiliser ce plugin, vous devez utiliser des éléments qui ont une image d'arrière-plan spécifiée (en utilisant la propriété CSS 'background-image'. Vous pouvez rendre les éléments réactifs à l'aide de requêtes CSS @media.
À propos:
Page d'accueil: http://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é en utilisant Javascript (pas de jQuery, juste du pur JS vanilla). Il prend en charge les fonctionnalités de défilement lissé, l'accélération et l'animation de parallaxe. Jarallax est pris en charge par la plupart des navigateurs, sur toutes les plates-formes. Le site Web de Jarallax a une excellente documentation sur la façon de personnaliser Jarallax pour vos besoins. Jarallax propose également des didacticiels vidéo montrant comment configurer Jarallax pour votre site Web et comment commencer.
À propos:
Page d'accueil: http://www.jarallax.com/
Créé par: Jarallax
Installation: Téléchargement depuis le site 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 augmente les performances d'animation et la fluidité. 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 d'une manière différente). Cependant, en utilisant la méthode setScrollContainerOffset, les effets Superscrollorama sont accessibles sur les appareils mobiles.
Voici le code pour cela:
.setScrollContainerOffset (x, y)
(x: le décalage x du scrollcontainer, y: le décalage x du scrollcontainer)
À propos:
Page d'accueil: http://johnpolacek.github.io/superscrollorama/
Créé par: johnpolacek
Installation: Télécharger depuis Github
VOIR AUSSI: 10 meilleurs générateurs de sites statiques
