CSS

Animation CSS3

Effet parallaxe avec défilement en pure CSS

Le terme parallaxe, utilisé notamment en astronomie depuis le 16e siècle, n’a pas attendu l’initiative de Nike de 2011 ni celle de Spotify pour être utilisé en programmation. C’était le cas des dessins animés de mon enfance. Par exemple quand Road Runner courrait après Wile E. le coyote. Il suffisait de faire défiler deux ou trois fonds d’écran en boucle et à différente vitesse pour créer un effet 3D sans effort. Cet effet, qui consiste à changer la position de l’observateur sur l’observation d’un objet, était aussi largement utilisé par les jeux vidéos d’arcade. En l’occurrence mon préféré « Moon Patrol », premier jeu vidéo d’arcade à utiliser l’effet parallaxe.

Il y a plusieurs types d’effet parallaxe, Paul Lewis en démontre quelques-unes dans son tutoriel Parallaxin'. L’effet 3D en déplaçant des objets a vitesse variable sur un fond en mouvement. Ou encore en se basant sur la position de la souris ou celle de du défilement de la page par exemple. L’effet 3D n’a pas su me convaincre avec le temps. C’est bien beau, c’est bien expérimental, mais à quel prix ! Une lourdeur et une grande dépendance au JavaScript pour ne pas dire jQuery. Pour un effet parfois simpliste, sans doute attracteur pour un temps, mais qui n’apporte absolument rien au contenu. En d’autres mots ce qu’une très belle photo fait sans effort. D’ailleurs aujourd’hui, le site de Nike se contente d’un beau vidéo tout à fait 3D comme tout bon vidéo !

Mais il y a plus simplement l’effet de la page qui défile sur plusieurs fonds d’écran fixe. Bon, encore une fois, on peut faire bouger le fond selon le défilement de la page. Et créer des effets non pas de profondeur, mais de grande fluidité. Mais contrairement au fond fixe, cela requiert encore un minimum de JavaScript. Alors que ce n’est même pas compatible avec le mobile. En effet, la plupart des codes empêchent même l’effet sur les mobiles et les tablettes !

Je m’étais essayé il y a plusieurs années, mais j’avais abandonné en réalisant le manque de portabilité, impossible sur les mobiles qui pouvaient même planter solide. Et voilà que le CSS3 arrive avec son « fixed » ! Toujours aussi insupportable (dans le sens d’un seul support), mais dorénavant possible sans une seule ligne de JavaScript ni aucune dépendance. D’autant qu’en cas d’incompatibilité, l’image s’affiche quand même sans aucune perte de contenu ! Pourquoi se priver d’une petite touche de professionnalisme, discrète et sans conséquence ?

Techniquement

Maudite chance qu’il y ait une belle histoire derrière la méthode, car l’explication m’use bien davantage que son code ! Rien de plus simple, une image de fond fixe background-attachment: fixed dans un conteneur muni d’une auteur minimale min-height: 400px.

.cParallaxe {
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 500px;
  background-image: url('image.jpg');
}

Exemple

Une variante de cette technique qui combine des images fixes et mobiles « Pure CSS Parallax Scrolling Effect ».

Exemple complet

L’exemple suivant utilise 3 fonds fixes. Le premier plein écran à titre d’entête (dit Hero) et les deux autres à 400 pixels de haut. L’idée consiste à ajouter du contenu entre les fonds parallaxe. Ici deux sections genre design « Une page » (one page).

<style>
  /* CSS POUR L'EXEMPLE */
  /* Simple reset */
  *,::after,::before{box-sizing:border-box}
  html{font-family:sans-serif;}
  article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
  body{margin:0;}
      
  /* Structure */
  .cConteneur {width:100%;max-width:1000px;margin:0 auto;}
  @media (min-width: 768px){.cLigne{display: table;width: 100%;}.cColonne{display: table-cell;width: 50%;vertical-align:middle;}}
      
  /* Sections */
  .cSection {position:relative;}
  @media (min-width: 768px){.cSection {padding: 150px 0;}}
  .cSectionTitre {margin:0;padding:0;font-size:36px;color:#fff;text-align:center;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);text-transform:uppercase;}
  @media (min-width: 768px){.cSectionTitre {font-size:46px;}}
  .cMarge {padding:15px;}
  @media (min-width: 768px){.cMarge {padding:50px;}}

  /* Images */
  .cImageFluide,.cImageCouvre{width:100%;max-width:100%;height:auto;}
  @media (min-width: 768px){.cImageFluide{width:auto;max-width:100%;height:auto;}.cImageCouvre{height:100%;min-height:400px;object-fit:cover;}}

   /* CSS POUR OBLIGATOIRE */
   /* Parallax */
  .cParallaxe1, .cParallaxe2, .cParallaxe3 {background-attachment: fixed;background-position: top;background-repeat: no-repeat;background-size: cover;}
  .cParallaxe1 {background-image: url('parallax1.jpg');min-height: 100%;min-height: 100vh;}
  .cParallaxe2 {background-image: url("parallax2.jpg");min-height: 400px;}
  .cParallaxe3 {background-image: url("parallax3.jpg");min-height: 400px;} 
  /* Annule l'effet pour les mobiles et tablettes */
  @media only screen and (max-device-width: 1200px) {.cParallaxe1, .cParallaxe2, .cParallaxe3 {background-attachment: scroll;min-height: 400px;}}
</style>

<body>
  <!-- Premier effet parallaxe pleine hauteur --> 
  <section class="cParallaxe1 cSection">
    <div class="cConteneur">
      <h1 class="cSectionTitre">À propos</h1>
    </div>
  </section>
    
  <!-- Section de contenu --> 
  <section class="cSection">
    <div class="cConteneur">
      <div class="cLigne">
        <div class="cColonne cMarge">
      	  <h2>À propos</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
        </div>
        <div class="cColonne">
      	  <img src="image.png" class="cImageCouvre" />
        </div>
      </div>
    </div>
  </section>
  
  <!-- Deuxième effet parallaxe --> 
  <section class="cSection cParallaxe2">
    <h3 class="cSectionTitre">Service</h3>
  </section>
  
  <!-- Section de contenu --> 
  <section class="cSection">
    <div class="cConteneur">
      <div class="cLigne">
        <div class="cColonne">
          <img src="image.png" class="cImageFluide" />
        </div>
        <div class="cColonne cMarge">
      	  <h2>À propos</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
      	</div>
      </div>
    </div>
  </section>

  <!-- Troisième effet parallaxe --> 
  <section class="cSection cParallaxe3">
    <h3 class="cSectionTitre">Contact</h3>
  </section>

</body>

<script>
window.addEventListener('scroll', function (e) {
  var nDefillement = window.pageYOffset;
  const oFond = document.querySelector('.cParallaxe1');
  oFond.style.backgroundPosition = "0 "+ -(nDefillement * 0.2) + 'px';
});
<script>

Transformation CSS3

Pour ajouter un petit mouvement sobre sans une seule ligne de JavaScript, il existe aussi plusieurs exemples en pure CSS qui utilisent la propriété CSS « transformation ». Du translateZ aux combinaisons de la propriété transform-style, la valeur preserve-3d et le pseudo élément :before comme l’exemple « Twitter-like Header Parallax Effect Using Pure CSS / CSS3 ». Avec toute fois des résultats plutôt décevant avec IE et Edge !

Conclusion

En conclusion, sans abuser de cette technique, cet effet à l’allure professionnel est maintenant possible avec un minimum d’effort et pour tout type de site. Et si vous avez plus d’ambition, vous avez des projets plus design et plus spectaculaires, n’hésitez pas à peaufiner cet art encore marginal dans une page Web en consultant les excellents tutoriels suivants. Et pour vous inspirer, voilà quelques exemples remarquables. Du simple mouvement de défilement et de la souris d’Hello Monday au splendide exemple horizontal de Hotdot sans oublier l’ergonomie fantastique du flayé Valaire.mu.

Références

• Parallaxin' par Paul Lewis
• CSS-Only Parallax Effect par Yago Estévez
• How To Create A Parallax Scrolling Website par Petr Tichy
• Pure CSS Parallax Websites par Keith Clark
• Zoom sur l’effet parallaxe par Simon-K de Alsacreations
• Bien utiliser le parallax sur le web par Nicolas de Novaway
• Simple Parallax Scrolling parallax.js librairie par PixelCog Inc.
• Pure CSS Parallax Scrolling Effect
• Performant Parallaxing par Paul Lewis et Robert Flack