Layouts – Parallaxe en Responsive Design

LEÇON PRATIQUE

 

Caractéristiques

C'est le même effet de parallaxe de la leçon précédente, mais cette fois-ci en Responsive Design. Le JavaScript / jQuery optimise le positionnement et la taille de l'image en prenant en compte la taille de l'écran et le décalage de l'image par rapport au début du document.

 

parallax-responsive-screenshotParallaxe Approche 2 - Sérieuse

Page en ligne : Ouvrir

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

 

Comment ça marche ?

La section (div) qui contient l'image a :

  • 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)

Manipulation via JavaScript / jQuery  :

  • malgré l'instruction CSS qui dit que le fond bouge à la même vitesse que le contenu (background-attachment : scroll), en réalité, via JavaScript / jQuery, l'image de fond bouge moins vite que le contenu quand on scrolle la page : l'attribut "top" de la propriété "background-position" est manipulé
  • malgré l'instruction CSS qui dit que l'image de fond doit être taillée pour avoir la même largeur que la div (background-size:100% auto), en réalité, via JavaScript / jQuery, la taille de l'image de fond est optimisée (pour voir un maximum du contenu de l'image) selon l'espace disponible et la puissance de l'effet parallaxe
  • malgré l'instruction CSS qui positionne l'image (background-position : 0 0), en réalité, via JavaScript / jQuery, la position de l'image est manipulée pour assurer l'affichage de la zone de l'image considérée la plus intéressante (par exemple le centre de l'image) via les "paramètres" imageAlignX et imageAlignY.

Remarques :

  • parce que l'image est positionnée par rapport à son conteneur (background-attachment : scroll) on n'a plus de problème des images en bas de page trop décalée par l'effet parallaxe
  • parce que l'image est taillée de façon à toujours remplir l'espace disponible, on a une page qui est responsive
  • parce que l'image est taillée de façon optimale selon l'espace disponible, on voit toujours le maximum possible du contenu de l'image
  • parce que l'image est positionnée de façon intelligente, l'affichage de la zone de l'image considérée la plus intéressante est assuré

 

HTML


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

 

CSS


.section-image
{
  height:450px;
  background:url('bg.jpg') 0 0 no-repeat scroll;
  background-size:100% auto;
}

 

JavaScript / jQuery : Paramètrage


function sectionClassOrId() { return '.section-image'; } /* css class or id qui permet de trouver la section (div avec l image de fond) */
function imageProportions() { return 1.777777778; }      /* largeur divisé par hauteur de l image de fond */
function parallaxFactor()   { return 0.5; }              /* facteur de puissance de l effet parallaxe (de 0.0 à 1.0) - typiquement 0.5 */
function imageAlignX()      { return 'center'; }         /* alignement X (left, center ou right) de l image de fond si elle n est pas affichée à 100% de sa largeur */
function imageAlignY()      { return 'center'; }         /* alignement Y (top, center ou bottom) de l image de fond si elle n est pas affichée à 100% de sa hauteur */

 

JavaScript / jQuery : Calcul de décalage pour l'effet parallaxe


           function bgParallax(section) /* fonction qui applique l effet parallaxe (retourne un entier) */
           {
             var sectionTop = section.offset().top;      /* distance Y : haut du document -> section */
             var windowTop = $(window).scrollTop();      /* distance Y : haut du document -> haut de la fenêtre (c est la valeur qui change quand on scrolle) */
             return parseInt((windowTop - sectionTop) * parallaxFactor());
           }

 

JavaScript / jQuery : Application de l'alignement horizontal (dans la direction X)


           function bgAlignX() /* fonction qui applique l alignement dans la direction X  (retourne une chaine) */
           {
             var a = imageAlignX();
             if (a == 'center') { return '50%'; }
             if (a == 'right')  { return '100%'; }
             /* a == 'left' */
             return '0';
           }

 

JavaScript / jQuery : Calcul de décalage pour l'alignement vertical (dans la direction Y)


           function bgAlignY(sectionWidth, sectionHeight, visibleParallaxPixels) /* fonction qui applique l alignement dans la direction Y  (retourne un entier) */
           {
             var a = imageAlignY();
             if (a == 'top')  { return 0; }
             surplusX = (sectionWidth / imageProportions()) - sectionHeight - visibleParallaxPixels;
             if (a == 'center') { return parseInt(-1.0 * (surplusX / 2.0)); }
             /* a == 'bottom' */
             return parseInt(-1.0 * surplusX);
           }

 

JavaScript / jQuery : Fonction "maître de chantier" qui détermine les attributs CSS pertinents pour l'image de fond (background-size et background-position)


           function setBackgroundImageProperties()
           {
             var section = $(sectionClassOrId());        /* référence jQuery vers la section */
             var sectionWidth = section.width();         /* largeur de la section */
             var sectionHeight = section.height();       /* hauteur de la section */
             var windowHeight = $(window).height();      /* hauteur de la fenêtre */

             var visibleParallaxPixels = (windowHeight - sectionHeight) * parallaxFactor(); /* dans la zone où l image est entièrement visible, ceci est le */
                                                                                            /* nombre maximum de pixels de décalage dû à l effet parallaxe */
             var parallaxedSectionHeight = sectionHeight + visibleParallaxPixels;           /* hauteur de la section, adjustée pour l effet parallaxe */
             var parallaxedSectionProportions = sectionWidth/parallaxedSectionHeight;       /* proportions de la section, adjustées pour l effet parallaxe */
             if (imageProportions() < parallaxedSectionProportions)
             {
               /* L image est suffisament grande pour être affichée à 100% de sa largeur. */
               section.css('background-size', '100% auto');
               var top = bgParallax(section) + bgAlignY(sectionWidth, sectionHeight, visibleParallaxPixels);
               section.css('background-position', '0 ' + top + 'px');
             }
             else
             {
               /* L image n est PAS suffisament grande pour être affichée à 100% de sa largeur. */
               /* Donc on l affiche à la hauteur minimale pour avoir de la marge pour l effet parallaxe. */
               /* On accepte le calcul automatique de la largeur qui sera en fonction des proportions de l image. */
               section.css('background-size', 'auto ' + parallaxedSectionHeight + 'px');
               section.css('background-position', bgAlignX() + ' ' + bgParallax(section) + 'px');
             }
           }

 

JavaScript / jQuery : les évènements qui déclenchent la fonction maître


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

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

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