C
C
ColorJS
Search…
Accueil
ColorJS, Une simple librairie pour créer des diaporamas en HTML/CSShey hey
Vous êtes sur la version française de la documentation. English Version
ColorJS est une librairie Javascript que vous pouvez utiliser pour créer des diaporamas animés, simplement en tapant du HTML et du CSS. La librairie se charge d'accélérer le processus de création.

Avantages et inconvénients de cette solution

Avantages
Inconvénients
Fonctionne sur n'importe quel navigateur
Nécessité de savoir coder pour créer des diaporamas
Open-source et très simple
Moins complet que des solutions comme slides.com
Quasiment sans limites (vous pouvez étendre ses fonctionnalités si vous savez utiliser javascript)
Synchronisation temps-réel entre 2 appareils facilitée
Vous pouvez publier votre diaporama comme un site web
  • slide: Une diapositive

Comment ça fonctionne

ColorJS se charge d'importer les styles nécessaires pour la mise en page du diaporama. Ensuite il fait correspondre des actions clavier à des ajouts/suppressions de classes CSS pour faire progresser l'animation.
Chaque slide est un élément div avec la classe cjs-slide. Le script ajoute la classe current à la slide en cours, et les transition et animations sont définies en CSS (par vous-même ou avec les propriétés livrées par défaut).
Pour laisser un maximum de flexibilité, le script ajout la classe current à la slide en cours et la classe prevà toutes les slides déjà passées. Ainsi vous pouvez choisir sur quelles propriétés CSS les changements s'appliquent.
Si vous voulez qu'un élément apparaisse seulement à un moment précis, vous pouvez lui ajouter l'attribut cjs-animate

Exemple de fichier diaporama

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8" />
5
<title>Titre de mon diaporama</title>
6
7
<script defer src="path/to/colorjs.bundle.js">
8
</head>
9
<body>
10
<div id="cjs-slider">
11
<div class="cjs-slide" style="background-color: #f00">
12
Ma première slide
13
</div>
14
<div class="cjs-slide" style="background-color: #8e44ad">
15
Ma deuxième slide
16
</div>
17
</div>
18
19
</body>
20
</html>
Copied!
Assez simple non ?
Pour en savoir plus, consultez la documentation pas-à-pas.
Last modified 1yr ago