Clearideaz, le portfolio d'Olivier Gorzalka, webdesigner sur Lille, Nord-Pas de Calais

webdesigner et intégrateur XHTML / CSS

Du Parallax avec jQuery et CSS

Le scrolling parallax est une technique qui consiste a créer un pseudo-effet de 3D sur un environnement en 2D. Si vous avez déjà pu jouer aux premières versions de Sonic The Hedgehog, vous comprendrez de quoi je parle. Je me suis amusé, encore une fois avec JQuery, a créer un effet parallax sur une page d’accueil d’un site existant.

J’ai repris la page d’accueil de SilverBackApp.com qui utilise déjà un effet Parallax au redimensionnement du navigateur. La technique très subtile consiste a placer les différentes couches de fonds avec des background-position en pourcentage. En jouant justement sur ces valeurs relatives, on peut de ce fait créer un effet intéressant lorsque l’utilisateur redimensionne sa fenêtre.

En partant de cette base, j’ai décidé de rajouter une couche Javascript. Le but est de changer la position du fond en fonction de la position de l’image. Pour cela, on va juste récupérer les positions du pointeur et utiliser ces valeurs pour déterminer le positionnement (en pixel cette fois) des différentes images.

On obtiendra avec jQuery ce type de code pour la div #frontvines

$("body").mousemove(function(event){
   $("#frontvines").css({ 
      backgroundPosition: (event.clientX * 1.1) + 'px 0px'
   });
});

Sur la première ligne, on cherche l’évènement qui indique que l’utilisateur bouge sa souris sur la page. Dans la partie fonction, on place en paramètre la position du curseur pour la réutiliser ensuite pour modifier les propriétés de styles associées à la balise comportant l’id #frontvines. Pour observer le résultat, rendez-vous sur la page dédié à cette démonstration disponible ici.

Pour aller plus loin, je me suis amusé, dans une seconde démonstration, à réutiliser une photo de paysage pour y introduire du parallax. Le principe reste le même, je vous laisse le soin de télécharger le script sur la page de la seconde démonstration, vous y trouverez la manière de procéder dans les commentaires du fichier Javascript.

Quelques liens en rapport avec Parallax :

Effet parallax à l’aide de CSS ou de Javascript

Utilisation de parallax sous Flash

Tutorial

7 commentaires »

  1. Marco, le à #1

    Excellent ! Je trouve ça mieux sur un mousemove pour l’exemple de SilverBackApp :)

    Répondre

  2. keusta, le à #2

    hey très bonne idée qui n’était réalisable qu’avec flash jusqu’a présent… avec les sources en plus (merci)
    la deuxième démo est moins efficace que le premier exemple mais ca n’enlève rien au concept !

    Congrats !

    Répondre

  3. kawim, le à #3

    Bravo, très bon concept. C’est bluffant de voir l’étendue des possibilités qui s’ouvrent avec cette technologie. Ah oui, çà c’est du bon développement comme on l’aime. Et à quand le projet Jo-B ? :)

    Répondre

  4. jackso40, le à #4

    wouaw, c’est incroyable! J’adore.
    Je viens de découvrir ton blog, il est super…

    Répondre

  5. Delavy, le à #5

    Génial ! Au fait,y a t’il une attribution à mettre dans le un fichier pour attester de ta paternité pour ce petit bout de code magnifique ?

    Répondre

  6. Blop, le à #6

    L’exemple SilverBackApp avec Jquery est tout simplement bluffant. Par contre l’animation saccade lorsque l’on zoom dans le navigateur (avec CTRL+molette). A quoi serait-ce du ?

    Répondre

Laisser un commentaire

* (obligatoire)