9 plugins jQuery pour réaliser des effets de parallaxe

Tendance désormais bien ancrée dans le paysage du webdesign, le défilement parallaxe (ou scrolling différentiel) est une technique qui consiste à donner une impression de profondeur à travers des portions de décors défilant à vitesse variable. Voici une liste non exhaustive de 9 plugins jQuery pour mettre en place des effets de parallaxe sur votre site web.

1. Superscrollorama 4. Spritely 7. Scrolldeck
2. jParallax 5. Skrollr 8. Scroll Path
3. Curtain.js 6. Stellar.js 9. Plax

1. Superscrollorama

Superscrollorama, successeur de l’excellent Scrollorama, permet de réaliser de superbes animations et effets parallaxes lorsqu’on scroll sur une page web, notamment grâce aux transformations CSS3. Seulement quelques lignes de code pour un scrolling original et amusant.

2. jParallax

jParallax est un plugin jQuery qui permet de mettre en place facilement un effet de parallaxe sur un groupe d’éléments HTML. Son utilisation est similaire à celle d’un slider : une liste d’éléments située dans un conteneur avec la propriété CSS overflow:hidden pour cacher tout ce qui dépasse. J’en avais déjà parlé ici.

3. Curtain.js

Curtain.js est un plugin jQuery permettant de réaliser une page web avec un défilement parallaxe des différentes sections sous forme de « panneaux ». Le script a la particularité d’être très simple d’utilisation : une classe CSS par panneau suffit pour configurer son comportement au scroll.

4. Spritely

Spritely est une librairie vous permettant de réaliser des backgrounds animés afin de donner une impression de mouvement. Le plugin utilise notamment des sprites CSS pour l’animation de certaines éléments, comme le battement d’ailes des oiseaux (voir démonstration).

5. Skrollr

Skrollr est une librairie JavaScript qui permet de mettre en place des scrolling parallaxes. Particulièrement léger (6.5k minified), le script n’utilise pas le framework jQuery mais propose une manière originale de visionner vos pages web.

6. Stellar.js

Stellar.js est un plugin jQuery qui permet d’appliquer des effets de scrolling parallaxe sur n’importe quel élément HTML. Le script est complet, facile à utiliser et propose également un support pour iOS.

7. Scrolldeck

Scrolldeck est un plugin qui permet de réaliser de superbes scrolling parallaxes. Il reproduit parfaitement le principe parallaxe de l’ancien Nike Better World, un des tous premiers sites à innover avec la réalisation d’un one-page à base de scrolling différentiel très réussi.

8. Scroll Path

Scroll Path est un plugin qui permet de définir un chemin d’accès ou de défilement en « dessinant » le chemin de navigation avec des lignes, des arcs et des rotations. Il ne s’agit pas vraiment de parallaxe, mais l’objectif principal est similaire : un scrolling animé et original.

9. Plax

Plax est un plugin jQuery qui permet de mettre en place un effet parallaxe sur des éléments HTML en fonction de la position de la souris. Facile à prendre en main, le script a notamment été utilisé pour concevoir les fameuses pages 404 et 500 du service d’hébergement GitHub.

Pour conclure

Malgré quelques points sensibles comme le temps de chargement ou la fluidité de navigation, l’effet parallaxe reste une méthode effiface pour réaliser des webdesign originaux et créatifs s’il est utilisé à bon escient. Cette sélection de neuf ressources parallaxes vous aidera à trouver le script qui convient le mieux à vos envies !

Commentaires

  • Pixoum

    Superbe sélection ! Merci !

  • Merci pour ces très bonnes ressources.
    Je voulais justement me mettre aux effets parallaxe donc c’est parfait :)

  • kof_eve

    Merci pour la sélection

  • namazijt1984

    hHcJ Recently I used to be low on money and debits were killing me from everywhere! That was RIGHT UNTIL i decided to generate money on the INTERNET. I landed on surveymoneymaker point net, and started filling in surveys for money, and yes, i’ve been really more able to do my things!! i’m glad i did this!! 15MN