Défilement parallaxe avec jQuery

8

Le défilement parallaxe (ou scrolling différentiel) est une technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur.

Cet effet consiste à superposer plusieurs calques et les faire défiler à des vitesses différentes.

Il est possible de recréer cet effet dans une page web assez facilement avec CSS et jQuery.

Voir la démo

parallax

Observations

Le résultat n’est pas toujours aussi fluide qu’on pourrait le souhaiter. Le défilement risque de saccader sur les machines les moins puissantes.

La fluidité de l’animation dépend également de la taille de la fenêtre du navigateur.

Il est sûrement possible d’améliorer le code de cet exemple avec des background multiples ou une optimisation du code Javascript.

Les explications de code sont dans la démo.

Charger les commentaires

8

Commentaires

  1. LAUVERNIER Répondre

    Bonjour.

    J’ai un message d’erreur sur la fonction
    $(function()
    {
    parallax(); // calcul au chargement de la page
    $(window).scroll(parallax); // calcul au défilement de la page
    $(window).resize(parallax); // calcul au redimensionnement de la page
    });

    qui est le suivant:

    ReferenceError: $ is not defined

    Comment puis-je résoudre ce problème ?
    C’est la première fois que je teste le scrolling différentiel, et le langage jQuery …

    Merci beaucoup pour votre aide.

Laissez un commentaire :

  • (will not be published)