Layouts – Parallaxe

LEÇON PRATIQUE

 

Caractéristiques

Une ou plusieurs images de fond qui bouge derrière la page qui scrolle, mais avec une vitesse inférieure - ce qui donne une impression de profondeur à la page (un effet qu'on appelle "parallaxe").

 

parallax-screenshotParallaxe Approche 1 - Simpliste

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 ne bouge pas quand on scrolle (background-attachment : fixed)
  • une image de fond qui couvre entièrement l'écran (background-size : cover)
  • une image de fond positionnée afin que son coin en haut à gauche corresponde au coin en haut à gauche de l'écran (background-position : 0 0)

Manipulation via JavaScript / jQuery :

  • malgré l'instruction CSS qui dit que le fond ne bouge pas (background-attachment : fixed), en réalité, via JavaScript / jQuery, l'image de fond bouge légèrement quand on scrolle la page : l'attribut "top" de la propriété "background-position" est manipulé

 

HTML


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

 

CSS


.section-image
{
  height:450px;
  background:url('bg.jpg') 0 0 no-repeat fixed;
  background-size:cover;
}

 

JavaScript / jQuery


$(window).scroll(function() {
  var a = $(window).scrollTop();
  var b = parseInt(-0.5 * a);
  $('.section-image').css('background-position', '0 ' + b + 'px');
});

 

Pourquoi "simpliste" ?

Pour voir pourquoi cette solution est simpliste, et ne marche pas dans tous les cas :

  1. Afficher la page en vue adaptative et, quand on réduit la largeur de la fenêtre, observer comment le fond est trop décalé par l'effet parallaxe.
  2. Créer une version de la page avec plus de texte avant l'image de fond puis observer comment le fond est trop décalé par l'effet parallaxe.
  3. Créer une version de la page avec plusieurs sections de fond puis observer comment ces fonds sont trop décalés par l'effet parallaxe - surtout ceux qui sont loin du début de la page.

En plus : en vue adaptative avec un écran grand et étroite (comme un téléphone), observer comment l'extrémité gauche de l'image et affichée. Celle-ci n'est pas forcement la partie de l'image la plus intéressante.