Masque des diapositives
ColorJS possède un système de masque de diapositives basiques. Cela permet d'afficher un contenu récurrent sur chaque page.
Pour cela il suffit d'ajouter un élément avec la classe
cjs-mask et de mettre à l'intérieur ce que vous voulez voir apparaître sur chaque diapo.Prenons un diaporama ColorJS très basique structuré de cette manière:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de mon diaporama</title>
<script defer src="https://cdn.colorjs.cc/latest/colorjs.bundle.js"></script>
</head>
<body>
<div id="cjs-slider">
<div class="cjs-slide" style="background-color: #f00">
<div class="slidecontent">
Slide#1
</div>
</div>
<div class="cjs-slide cover bottom" style="background-color: #8e44ad">
<div class="slidecontent">
Slide#2
</div>
</div>
</div>
</body>
</html>
Pour que du contenu soit répliqué sur chaque slide, il suffit d'ajouter une
divavec la classe cjs-maskdans l'élément #cjs-slider:<div class="cjs-mask">
Content in the mask
</div>
Ce qui donne:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de mon diaporama</title>
<script defer src="https://cdn.colorjs.cc/latest/colorjs.bundle.js"></script>
</head>
<body>
<div id="cjs-slider">
<div class="cjs-slide" style="background-color: #f00">
<div class="slidecontent">
Slide#1
</div>
</div>
<div class="cjs-slide cover bottom" style="background-color: #8e44ad">
<div class="slidecontent">
Slide#2
</div>
</div>
<div class="cjs-mask">
Content in the mask
</div>
</div>
</body>
</html>
Et voilà! Le contenu dans l'élément masque est répliqué sur toutes les slides lors du chargement de la page!