Effet Parallaxe

Dernière mise à jour le 3 avril 2022 par LMD

On peut voir de nombreux sites one-page qui font défiler verticalement au scroll des blocs de contenu successifs semblant se passer devant l’un l’autre. Ces « écrans » occupent tout le format du viewport avec souvent une image en alternance d’un bloc de texte.

Scroll one-page

La structure du code HTML est assez simple. Il s’agit d’une succession de blocs (sections, articles ou div tout simplement). Dans l’exemple ci-dessous, j’ai utilisé des sections contenant uniquement du texte. Une section sur deux recevra une image d’arrière plan en CSS. Elles comportent toutes une classe « ecran ». Elles sont placées dans le conteneur principal <main> entre le header et et le footer, mais il pourrait en être autrement, tout dépend de la structure de votre code.

<main id="content">
   <section class="ecran">
      <h1>Come To Iceland</h1>
   </section>

   <section class="ecran">
      <h2>The last settled part of Europe, much of Iceland remains pristine and untouched.</h2>
   </section>
			
   <section class="ecran">
      <h2>Population: 325,671</h2>
      <h2>Area: 103,001km<sup>2</sup></h2>
      <h2>= 3 people per square km</h2>
   </section>

   <section class="ecran">
      <h2>With abundant geothermal energy, Iceland is also one of the greenest places on earth.</h2>
   </section>

   <section class="ecran">
      <h2>Come to Iceland. You’ll be amazed.</h2>
   </section>
</main>

Et voici le code CSS.
On commence par supprimer les marges par défaut de body
Puis le gros du travail se fait dans la classe ecran. On règle d’abord le positionnement du texte dans le bloc, par l’alignement du texte, les marges et le positionnement flex centré. On indique ensuite la dimension du bloc afin qu’il occupe tout l’espace du viewport. Enfin, on applique des réglages de comportement des images d’arrière plan, fixe et plein format.

Les autres règles s’appliquent alternativement à chaque section pour des mises en forme du contenu et du fond. Le fond est blanc pour les blocs pairs (even) et avec une image d’arrière plan pour les blocs impairs.

body { 
   margin: 0; 
}
.ecran {
   text-align: center;
   padding: 2vw;
   font-size: 6vw;

   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;

   box-sizing: border-box;
   height: 100vh;

   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
}
.ecran:first-of-type {
   text-transform: uppercase;
   color: #fff;
   font-size: 8vw;
   text-shadow: 0 0 5px rgba(0,0,0,0.4);
}
.ecran:nth-of-type(even) {
   background: #fff;
}
.ecran:nth-of-type(1) {
   background-image: url(../media/fond1.jpg);
}
.ecran:nth-of-type(3) {
   background-image: url(../media/fond2.jpg);
}
.ecran:nth-of-type(5) {
   background-image: url(../media/fond3.jpg);
}

Pour mémoire, « even » veut dire nombre pair.

Design collaboratif