/
- c-scrollsyncbar.js

c-scrollsyncbar.js

Documentation de la librairie c-scrollsyncbar.js permettant d’afficher/masquer des éléments HTML progressivement en fonction du sens de défilement de la fenêtre.

Dernière modification 2025-06-19

ITADS

Table des matières

Installation
En local
Sur CDN
Usage
Sensibilité
Formule personnalisée
Méthode update
Méthode pause
Méthode stop
API

GIF exemple usage c-scrollsyncbar.js 1

Démo c-scrollsyncbar.js

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Démo scrollsyncbar</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            min-height: 500vh;
            padding: 5em 3em;
            font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif; 
            line-height: 1.5em;
            background-color: ghostwhite;
        }
        #commands {
            margin-top: 10em;
            margin-bottom: 10em;
            position: sticky;
            top: 5em;
        }
        #commands menu {
            display: flex;
            flex-direction: column;
            gap: 1em;
        }
        [c-scrollsyncbar=""] {
            position: fixed;
            top: 0%;
            left: 0;
            width: 100%;
            padding: 1em;
            background-color: dodgerblue;
            color: white;
        }
        [c-scrollsyncbar="bar"] {
            position: fixed;
            top: 100%;
            left: 0;
            width: 100%;
            padding: 2em;
            background-color: yellowgreen;
            color: green;
        }
        [c-scrollsyncbar=""] a {
            color: white;
        }
        [c-scrollsyncbar="bar"] a {
            color: green;
        }
    </style>
</head>
<body>
<nav c-scrollsyncbar="">
    <a href="#">c-scrollsyncbar.js</a>
</nav>

<p>Défiler vers le bas pour observer l'effet, vers le haut pour inverser immédiatement le mouvement.</p>

<p>ScrollSyncBar est une barre d'affichage et de masquage synchronisée avec le défilement de la fenêtre.</p>

<p>ScrollSyncBar permet d'afficher et de masquer progressivement la navigation ou tout autre élément en synchronisation avec le défilement de la fenêtre.</p>

<nav id="commands">
    <menu>
        <li>
            <button onclick="cScrollSyncBar.update()">
                cScrollSyncBar.update()
            </button> <br>
            Initialise en créant les instances des éléménts à activer
        </li>
        <li>
            <button onclick="cScrollSyncBar.update({scrollSteps:500})">
                cScrollSyncBar.update({scrollSteps:500})
            </button> <br>
            Plus le paramètre scrollSteps est élevé,
            plus la course du défilement nécessaire est longue (200 par défaut)
        </li>
        <li>
            <button onclick="cScrollSyncBar.update({scrollSteps:50})">
                cScrollSyncBar.update({scrollSteps:50})
            </button> <br>
            Plus le paramètre scrollSteps est petit,
            plus la course du défilement nécessaire est courte (200 par défaut)
        </li>
        <li>
            <button onclick="cScrollSyncBar.pause()">
                cScrollSyncBar.pause()
            </button> <br>
            Stoppe et laisse l'élément en l'état
        </li>
        <li>
            <button onclick="cScrollSyncBar.stop()">
                cScrollSyncBar.stop()
            </button> <br>
            Stoppe et rétablit l'état d'origne de l'élément
        </li>
        <li>
            <button onclick="cScrollSyncBar.start()">
                cScrollSyncBar.start()
            </button> <br>
            Démarre la synchronisation
        </li>
    </menu>
</nav>

<nav c-scrollsyncbar="bar">
    <a href="#">Retour vers le haut</a>
</nav>

<script src="/assets/c-scrollsyncbar.js"></script>

</body>
</html>

Activer

Ouvrir

Activer

Largeur: -px
Hauteur: -px

Installation

Il est recommandé de placer les fichiers dans cet ordre avant la balise fin de body.

En local

<script src="/path/to/c-scrollsyncbar.js"></script>

Sur CDN

Via https://www.jsdelivr.com/

Version la plus récente:

https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js@main/assets/c-scrollsyncbar.js

Version la plus récente minifiée:

https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js@main/assets/c-scrollsyncbar.min.js

Typologie avec numéro de version:

https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js@<TAG_VERSION>/assets/c-scrollsyncbar.js

Typologie numéro de version + minification automatique:

https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js@<TAG_VERSION>/assets/c-scrollsyncbar.min.js

Exemple v0.1.0:

https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js@0.1.0/assets/c-scrollsyncbar.js
https://cdn.jsdelivr.net/gh/ita-design-system/c-scrollsyncbar.js@0.1.0/assets/c-scrollsyncbar.min.js

Usage

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>

Sensibilité

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 scrollSteps est élevé, plus la course du défilement nécessaire est longue
Plus le paramètre scrollSteps est 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});

Formule personnalisée

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:

Démo 2

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Démo scrollsyncbar 2</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            min-height: 500vh;
            padding: 5em 3em;
            font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif; 
            line-height: 1.5em;
            background-color: ghostwhite;
        }
        [c-scrollsyncbar="foo"] {
            position: fixed;
            top: 0%;
            left: 0;
            width: 100%;
            padding: 1em;
            background-color: yellowgreen;
        }
        footer {
            position: fixed;
            perspective: 800px;
            bottom: 0;
            left: 0;
            width: 100%;
        }
        [c-scrollsyncbar="bar"] {
            padding: 2em;
            background-color: dodgerblue;
        }
        [c-scrollsyncbar="foo"] a {
            color: green;
        }
        [c-scrollsyncbar="bar"] a {
            color: white;
        }
    </style>
</head>
<body>
    <nav c-scrollsyncbar="foo"
    data-transform="translateY(-|x|%) scale(clamp(0.5, calc(1 - |x| / 100), 1))">
    <a href="#">c-scrollsyncbar.js</a>
</nav>

<p>Défiler vers le bas pour observer l'effet, vers le haut pour inverser immédiatement le mouvement.</p>

<footer>
    <nav c-scrollsyncbar="bar"
        data-transform="rotateY(clamp(0deg, |x|deg, 90deg)">
        <a href="#">Retour vers le haut</a>
    </nav>
</footer>

<script src="/assets/c-scrollsyncbar.js"></script>

</body>
</html>

Activer

Ouvrir

Activer

Largeur: -px
Hauteur: -px

Méthode update

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});

Méthode pause

Interrompre l'effet de la librairie. Maintient les élements dans l'état courant.

cScrollSyncBar.pause();

Méthode stop

Stoppe l'effet de la librairie et réinitialise les élements dans leur état d'origine.

cScrollSyncBar.stop();

API

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;