Scroll avec background révélé en pur CSS

Le défilement faisant apparaître des backgrounds différents est une technique populaire aujourd'hui, souvent réalisée via de fortes doses de JavaScript. Dudley Storey en propose une version moderne en pur CSS.

Par

Une technique de présentation assez populaire depuis quelques temps est ce que j’appelle le défilement avec background révélé (background reveal scroll) : à mesure qu’on fait défiler la page vers le haut, les images sont recouvertes et révélées en arrière-plan.

See the Pen Easy Fullscreen Page Scroll With Background Reveal by Dudley Storey (@dudleystorey) on CodePen.

Cette technique présente l’avantage de concentrer le contenu en quelques images fortes et textes concis. Cependant, l’effet est souvent obtenu via de bonnes doses de JavaScript et autres plugins qui, comme nous allons le voir, sont complètement inutiles dans les navigateurs modernes.

Fenêtres et stores

On pourrait comparer la configuration de base pour cet effet à une série de “fenêtres” ouvertes et de “stores” fermés, empilés les uns par dessus les autres, et ayant chacun les mêmes dimensions que le viewport.

Commençons avec un balisage basique. Les fenêtres et les stores peuvent être réalisées avec à peu près n’importe quel élément conteneur HTML. Je vais utiliser ici <section> :

//HTML
<section>
  <h1>Come To Iceland</h1>
</section>
<section>
  <h1>The last settled part of Europe, much of Iceland remains pristine and untouched.</h1>
</section>
...

Pour donner les mêmes dimensions à chacun de ces éléments, je vais supprimer toutes les marges de l’élément <body>, m’assurer que les éléments <section> sont dimensionnés en utilisant border-box et donner à chacun exactement la même hauteur que le viewport en utilisant les unités vw. Pour formater le texte, j’utiliserai également des unités vw :

//CSS
body { margin: 0; }
section {
  box-sizing: border-box;
  height: 100vh;
  text-align: center;
  padding: 2vw;
  font-size: 6vw;
}

Les éléments <section> prennent déjà toute la largeur. Pour centrer leur contenu, je vais utiliser flexbox. Les éléments affichant les backgrounds sont tous traités de la même manière, donc je vais les inclure dans la déclaration :

//CSS
section {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

NdT : pour plus d’infos sur l’utilisation de justify-content et align-items, voir les articles du Dico-CSS consacrés à justify-content et align-items.

L’utilisation de flex-direction sert à couvrir toutes les “fenêtres” qui contiendraient plusieurs lignes de textes. Dans la première section, le texte est plus grand, écrit en blanc et tout en majuscules, avec un text-shadow pour le faire ressortir de l’arrière-plan :

//CSS
section:first-of-type {
  text-transform: uppercase;
  color: #fff;
  font-size: 8vw;
  text-shadow: 0 0 5px rgba(0,0,0,0.4);
}

Les éléments <section> pairs (even) ont un background blanc :

//CSS
section:nth-of-type(even) {
  background: #fff;
}

Les éléments <section> impairs (odd) ont une image de background :

//CSS
section:nth-of-type(1) {
  background-image: url(iceland-fjords.jpg);
}
section:nth-of-type(3) {
  background-image: url(iceland-pool-faces.jpg);
}
section:nth-of-type(5) {
  background-image: url(iceland-ice.jpg);
}

Et voilà ! Bien sûr, cette version en pur CSS est destinée aux navigateurs modernes qui supportent vh, vw et flexbox ( NdT : c’est à dire à peu près à tous les navigateurs aujourd’hui, voir Can I Use Viewport Units et Flexbox). Si vous voulez assurer une compatibilité avec les navigateurs ancients, des solutions de repli CSS sont possibles : le mode d’affichage CSS table-row pour chaque <section> par exemple. Vous pouvez voir l’effet final en début d’article ou ici pour une version plein écran.

La police de caractères utilisée dans cette démo est l’excellente Edelsans de Jakob Runge, utilisée avec sa permission. Les photos sont de Gueorgui Tcherednitchenko, Moyan Brenn et Nate Bolt, sous licence Creative Commons.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.


Du même auteur dans La Cascade :

Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, Demosthenes.info.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2014.