Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

CSS

Animation CSS3

RDFFav

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 pour être utilisé en programmation.Vanilla JS, CSS3, Animation, background, Image, preserve-3d, fixed

Moon Patrol 1982
Moon Patrol 1982

Source : wikipedia.orgLe 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>
Animer le fond en pur JavaScript

Vous voulez un petit effet classique supplémentaire basé sur le défilement de la page ? On triche un peu cette fois avec quelques lignes de pur JavaScript pour déplacer la première image de fond en fonction du défilement de la page. En modifiant la position de l’image de fond (top) selon le déplacement de la page, l’image pourtant fixe se déplacera lentement vers le haut provoquant un effet encore plus marqué !

<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
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

9/10 sur 1 revues.
       Visites : 75 - Pages vues : 93
X

Trucsweb.com Connexion

X

Trucsweb.com Mot de passe perdu

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte