10 décembre 2012
Category:
Javascript
Comments: 3

Parallax : Outils et Techniques

L’effet Parallax est devenu incontournable à travers le web, nous sommes nombreux à rechercher des outils et techniques afin de maitriser au mieux cet effet en javascript. Voici quelques sites que l’on à rassembler afin de vous aider dans vos projets. L’effet Parallax créait une illusion de profondeur et de mouvement, lorsqu’il est utilisé à bon escient, l’expérience utilisateur peut en être fortement enrichi. Comme pour tout effet, nous vous conseillons de l’utiliser avec modération, éviter de surcharger vos pages d’éléments, au risque de détériorer l’expérience que vos visiteurs auront sur votre site.

Thème WordPress HERO

Un thème wordpress utilisant l’effet Parallax. Ce portfolio utilise l’effet parallax dans une large bannière sur la page d’accueil pour mette en évidence le slogan du site.

Demo | Plus d’infos

Scrollorama

Le plugin jQuery pour avoir un scroll « super cool »


Plus d’infos + Démo

Curtain JS

Ce plugin vous permet de créer une page web avec de multiples panneaux fixes, se dépliant avec un effet plutôt amusant.

Plus d’infos

jQuery Parallax

Si vous cherchez à recréer l’effet tel que sur le site de Nike Better World, c’est ce plugin qu’il vous faut.

Plus d’infos | Démo

Stellar

Mettre en place un effet Parallax n’a jamais été aussi facile. Ajouter des attributs de données simples à votre balisage, exécutez $. Stellaires (), et c’est tout, voilà ce que promet ce plugin !

Plus d’infos | Demo

jParallax

L’effet parallax utilise des couches ayant une position absolue, et se déplaçant en fonction de la souris. Ces couches se déplacent chacune à une vitesse différente, en fonction de leur dimension. En utilisant quelques règles CSS, vous pourrez disposer vos fenêtres, où les laisser libre.

Plus d’infos

Skrollr

Le défilement avec effets parallax pour monsieur tout le monde !

Plus d’infos

Parallax.js

Un cadre épatant en javascript pour faire glisser horizontalement et avec élégance vos pages.

Plus d’infos

Tuto Parallax

Un petit simple pour mettre en place un défilement en parallax.

Lire le tuto (anglais) Demo

Utilisez vous l’effet parallax sur votre site, sur le site d’un de vos clients ? Connaissez vous des techniques et outils pour mettre en place cet effet de manière simple ? N’hésitez pas à partager vos connaissances, vos questions, vos liens sur le sujet dans les commentaires ci-dessous.



3 réponses pour “Parallax : Outils et Techniques

  1. bab dit :

    Merci pour cet article, intéressant 🙂

  2. tvh-web dit :

    L’un des inconvénients du parallax c’est le référencement.
    vous en pensez quoi?Des astuces?

    • Tom dit :

      Salut TVH,
      je penses que les sites en Parallax sont plutôt des sites « marketing », du genre landing page, essentiellement faites pour recevoir du trafic et le convertir. Maintenant rien n’empêche de conserver une page d’accueil avec cet effet, en y mettant de belles images et de belles paroles phrases d’accroche, et de conserver derrière de « vrai » pages de contenu …

Répondre à Tom Annuler la réponse

Votre adresse e-mail ne sera pas publiée.