Layouts – Parallaxe Multizone

LEÇON PRATIQUE

 

Caractéristiques

L'effet parallaxe en responsive design dans une page avec multiples zones distinctes de parallaxe.

 

parallax-multi-screenshotParallaxe Approche 3 - Intégrale

Page en ligne : Ouvrir

Code source (fichier ZIP) : Télécharger

 

Comment ça marche ?

Comme pour l'approche 2, chaque section (div) qui contient une image parallaxe a toujours :

  • une hauteur spécifique
  • (selon le CSS) un fond qui bouge quand on scrolle, et à la même vitesse que le contenu (background-attachment : scroll)
  • (selon le CSS) une image de fond qui est taillée pour avoir la même largeur que la div (background-size:100% auto)
  • (selon le CSS) une image de fond positionnée afin que son coin en haut et à gauche corresponde au coin en haut et à gauche de l'écran (background-position : 0 0)

Ce qui change côté HTML et CSS : on ajoute un "id" sur les éléments de classe "section-image" pour pouvoir spécifier une image différente pour chaque section.

Ce qui change côté JavaScript / jQuery : on introduit une boucle pour faire une itération et manipuler chaque section (image en parallaxe) à son tour. Le reste du code JavaScript / jQuery est quasi-identique.

 

HTML


<div class="section-image" id="section-image-1"></div>

...

<div class="section-image" id="section-image-2"></div>

...

<div class="section-image" id="section-image-3"></div>

 

CSS


.section-image
{
  height:450px;
  background:0 0 no-repeat scroll;
  background-size:100% auto;
}

#section-image-1
{
  background-image:url('bg1.jpg');
}

#section-image-2
{
  background-image:url('bg2.jpg');
}

#section-image-3
{
  background-image:url('bg3.jpg');
}

 

JavaScript / jQuery


           function numBackgrounds() { return 3; }  /* nombre d images de fond */

           ...

           function setBackgroundImageProperties(n)
           {
             var sectionId = '#' + sectionIdPrefix() + n;
             var section = $(sectionId); /* référence jQuery vers la section */
             ...
           }

           function setAllBackgroundImageProperties()
           {
             for (n = 1; n <= numBackgrounds(); n++)
             {
               setBackgroundImageProperties(n);
             }
           }

           $(window).load(function() {
             setAllBackgroundImageProperties();
           });

           $(window).resize(function() {
              setAllBackgroundImageProperties();
           });

           $(window).scroll(function() {
             setAllBackgroundImageProperties();
           });

 

LE CODE PARALLAXE SOUS FORME DE "MODULE" RÉUTILISABLE

Encapsulation du code générique JavaScript / jQuery dans un fichier externe (parallax.js).

 

Parallaxe Approche 4 - Réutilisable

Page en ligne : Ouvrir

Code source (fichier ZIP) : Télécharger

 

Comment ça marche ?

Pour exploiter le module : remarquer l'inclusion de "parallax.js" et la spécification de paramètres juste en dessous. Pour chaque paramètre il y a une valeur par défaut. On spécifie ici les paramètres pour lesquels on ne veut pas la valeur par défaut.

 

HTML


    <head>
        ...
        <script type="text/javascript" language="JavaScript" src="jquery-1.12.1.min.js"></script>
        <script type="text/javascript" language="JavaScript" src="parallax.js"></script>
        <script type="text/javascript" language="JavaScript">
          parallaxConfig.numBackgrounds = 3;
        </script>
    </head>

 

parallax.js (section paramètres)


/* parallaxConfig est un conteneur pour les paramètres de configuration */
function parallaxConfig() {}
/* configuration par défaut */
parallaxConfig.numBackgrounds   = 1;           /* nombre d images de fond */
parallaxConfig.sectionIdPrefix  = 'parallax-'; /* préfix du css id qui permet de trouver les sections (les divs avec image de fond) */
parallaxConfig.imageProportions = 1.777777778; /* largeur divisé par hauteur des images de fond (toutes identiques) */
parallaxConfig.parallaxFactor   = 0.5;         /* facteur de puissance de l effet parallaxe (de 0.0 à 1.0) - typiquement 0.5 */
parallaxConfig.imageAlignX      = 'center';    /* alignement X (left, center ou right) de l image de fond si elle n est pas affichée à 100% de sa largeur */
parallaxConfig.imageAlignY      = 'center';    /* alignement Y (top, center ou bottom) de l image de fond si elle n est pas affichée à 100% de sa hauteur */

EXEMPLES

 

Parallaxe Exemple 1 - Simpsons

Page en ligne : Ouvrir

Code source (fichier ZIP) : Télécharger

 

Parallaxe Exemple 2 - Boutique

Page en ligne : Ouvrir

Code source (fichier ZIP) : Télécharger