Animation • v1.2.0

@synqro/infinite-logo

Bannière seamless en infinite scroll pour logos, texte ou n'importe quel contenu.

Clone le contenu, le positionne en loop et anime en CSS transforms. Attend que toutes les images soient chargées avant de mesurer, donc la vitesse est constante entre desktop et mobile.

Install • À coller dans Project Settings → Custom Code → Footer

HTML

<!-- [Synqro Labs] Infinite Logo -->
<script src="https://cdn.jsdelivr.net/npm/@synqro/infinite-logo@1/dist/index.min.js"></script>

Installation

1
Ajoute le script à ton projet Webflow. Va dans Project Settings → Custom Code → Footer Code et colle le snippet ci-dessus.
2
Ajoute les custom attributes sur les éléments concernés dans le Designer Webflow — voir le tableau ci-dessous.
3
Publie ton site. Le script s'initialise automatiquement au DOMContentLoaded.

Configuration

Sélectionne l'élément dans le Designer Webflow et ajoute ces custom attributes dans le panneau Element Settings.

Attribute	Value	Description
Required	`infinite-logo`	Active le défilement infini sur le container.
	`30`	Secondes pour faire défiler 1000px de contenu. Même vitesse visuelle sur desktop et mobile.
	`left \| right`	Sens du défilement. Par défaut : left.
	`true \| play`	true : met en pause au survol. play : en pause par défaut, défile uniquement au survol et revient au début quand le curseur quitte.
	`20px, 2rem, etc.`	Espacement entre les éléments.

Exemples

Bannière de logos

HTML

<div class="banner-container" style="overflow: hidden">
    <div
        class="banner-list"
        sl-banner-list="infinite-logo"
        sl-banner-speed="20"
        sl-banner-gap="40px"
        style="display: flex"
    >
        <img src="logo1.png" alt="Logo 1" />
        <img src="logo2.png" alt="Logo 2" />
        <img src="logo3.png" alt="Logo 3" />
    </div>
</div>

Direction inversée avec pause au survol

HTML

<div class="banner-list"
    sl-banner-list="infinite-logo"
    sl-banner-direction="right"
    sl-banner-hover="true"
>
    ...
</div>

Défile uniquement au survol (en pause par défaut)

HTML

<div class="banner-list"
    sl-banner-list="infinite-logo"
    sl-banner-hover="play"
>
    ...
</div>

Tips

Le container parent doit avoir overflow: hidden.
La liste (avec sl-banner-list) doit être en display: flex.
Plus la valeur de sl-banner-speed est haute, plus le défilement est lent.
sl-banner-hover="play" garde la bannière immobile jusqu'au survol, puis revient au début quand le curseur quitte.