c-scrollsyncbar.js est une librairie permettant d'afficher/masquer des éléments HTML progressivement en fonction du sens de défilement de la fenêtre.
Il est recommandé de placer les fichiers dans cet ordre avant la balise fin de body.
<body>
<script src="/path/to/c-scrollsyncbar.js"></script> <!-- obligatoire -->
</body><!-- Version la plus récente -->
https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js/ui/js/c-scrollsyncbar.js
<!-- Version la plus récente minifiée -->
https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js/ui/js/c-scrollsyncbar.min.js
<!-- Typologie avec numéro de version -->
https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js@<TAG_VERSION>/ui/js/c-scrollsyncbar.js
<!-- Typologie numéro de version + minification automatique -->
https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js@<TAG_VERSION>/ui/js/c-scrollsyncbar.min.js
<!-- Exemple v0.1.0 -->
https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js@v0.1.0/ui/js/c-scrollsyncbar.js
https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js@v0.1.0/ui/js/c-scrollsyncbar.min.js<body>
<!-- Exemple avec version la plus récente -->
<script src="https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js/ui/js/c-scrollsyncbar.min.js"></script>
<!-- Exemple avec numéro de version -->
<script src="https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js@v0.1.0/ui/js/c-scrollsyncbar.min.js"></script>
</body>Ajouter c-scrollsyncbar="IDENTIFIANT_UNIQUE_OPTIONNEL" à l'élément. Par défaut l'élément subit une transformation CSS translateY(-|x|%) dans laquelle |x| est un nombre compris entre à et 100.
<!-- Minimal -->
<div c-scrollsyncbar="">
<!-- Contenu -->
</div>
<!-- Avec id personnalisé -->
<div c-scrollsyncbar="foo">
<!-- Contenu -->
</div>Par défaut, l'initialisation se fait avec paramètre de sensibilité de scrollSteps: 200, qui correspond au nombre de pixels de défilement qu'il faut pour compléter la course de l'élément.
Il est possible de modifier cette sensibilité en invoquant la méthode cScrollSyncBar.update({scrollSteps: <INTEGER>});
- Plus le paramètre
scrollStepsest élevé, plus la course du défilement nécessaire est longue - Plus le paramètre
scrollStepsest petit, plus la course du défilement nécessaire est courte
// Faible sensibilité, course longue
cScrollSyncBar.update({scrollSteps: 500});
// Par défaut
cScrollSyncBar.update();
// Est équivalent à
cScrollSyncBar.update({scrollSteps: 200});
// Haute sensibilité, course courte
cScrollSyncBar.update({scrollSteps: 50});c-scrollsyncbar.js fonctionne uniquement avec la propriété CSS transform. Par défaut, la formule de transformation est translateY(-|x|%) dans laquelle |x| est un nombre compris entre à et 100. Il est possible de personnaliser la formule pour chaque élément en l'écrivant dans l'attribut data-transform de l'élément:
<div c-scrollsyncbar="foo" data-transform="translateY(-|x|%) scale(clamp(0.5, calc(1 - |x| / 100), 1))">
<!-- contenu -->
</div>
<div c-scrollsyncbar="bar" data-transform="rotateY(clamp(0deg, |x|deg, 90deg)">
<!-- contenu -->
</div>- Indispensable pour initialiser l'application, crée les instances des éléments sur lequels appliquer l'effet.
- Mettre à jour les options
// Initialisation ou mise à jour avec paramètres par défaut
cScrollSyncBar.update();
// Initialisation ou mise à jour avec paramètres personnalisés
cScrollSyncBar.update({scrollSteps: 500});Interrompre l'effet de la librairie. Maintient les élements dans l'état courant.
cScrollSyncBar.pause();Stoppe l'effet de la librairie et réinitialise les élements dans leur état d'origine.
cScrollSyncBar.stop();Toutes les instances de cScrollSyncBar sont placées dans cScrollSyncBar.instances[ID_DE_L_INSTANCE]. ID_DE_L_INSTANCE est l'id de l'élément s'il est présent, s'il est absent, cScrollSyncBar applique un id préfixé de cssb_ suivi de l'index de l'instance.
// Élément DOM activé
cScrollSyncBar.instances[ID_DE_L_INSTANCE].el;
// Formule CSS transform en application
cScrollSyncBar.instances[ID_DE_L_INSTANCE].formula;