Masque des diapositives

ColorJS

Search…

Français

Accueil

Official site

Création d'un diaporama

Démarrer

Créer une présentation

Transitions

Animations individuelles

Masque des diapositives

Fonctions avancées

Synchronisation entre plusieurs appareils

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.
Principe
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.
Exemple
Prenons un diaporama ColorJS très basique structuré de cette manière:
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8" />
5
    <title>Titre de mon diaporama</title>
6
    
7
    <script defer src="https://cdn.colorjs.cc/latest/colorjs.bundle.js"></script>
8
</head>
9
<body>
10
    <div id="cjs-slider">
11
        <div class="cjs-slide" style="background-color: #f00">
12
          <div class="slidecontent">
13
            Slide#1         
14
          </div>
15
        </div>
16
        <div class="cjs-slide cover bottom" style="background-color: #8e44ad">
17
          <div class="slidecontent">
18
            Slide#2            
19
          </div>
20
        </div>
21
    </div>
22
</body>
23
</html>
Copied!
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:
1
<div class="cjs-mask">
2
    Content in the mask
3
</div>
Copied!
Ce qui donne:
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8" />
5
    <title>Titre de mon diaporama</title>
6
    
7
    <script defer src="https://cdn.colorjs.cc/latest/colorjs.bundle.js"></script>
8
</head>
9
<body>
10
    <div id="cjs-slider">
11
        <div class="cjs-slide" style="background-color: #f00">
12
          <div class="slidecontent">
13
            Slide#1         
14
          </div>
15
        </div>
16
        <div class="cjs-slide cover bottom" style="background-color: #8e44ad">
17
          <div class="slidecontent">
18
            Slide#2            
19
          </div>
20
        </div>
21
      
22
        <div class="cjs-mask">
23
          Content in the mask
24
        </div>
25
    </div>
26
</body>
27
</html>
Copied!
Et voilà! Le contenu dans l'élément masque est répliqué sur toutes les slides lors du chargement de la page!
​

Animations individuelles

Next - Fonctions avancées

Synchronisation entre plusieurs appareils

Last modified 1yr ago

Copy link

Contents

Principe

Exemple