Infinite canvas

Ce qui est inclus

Un mur d’images en maçonnerie qui se tire à la souris, au doigt ou au clavier, et se répète à l’infini dans les deux sens. Dans deux fichiers : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête externe — on les copie dans un projet et ça marche.

Vos images restent dans le HTML, en clair. Le composant les lit, en fait une tuile et la répète ; il ne les remplace pas. C’est cette même liste que lisent les lecteurs d’écran, une seule fois, pendant que la répétition visuelle est marquée décorative. Un CMS qui change les images n’a rien à appeler : le mur se reconstruit tout seul.

La pastille Images / Videos est livrée avec, et s’utilise séparément. Ce sont des boutons radio natifs : le groupe, les flèches, la valeur envoyée avec le formulaire viennent du navigateur, pas du script.

Fonctionnalités

• Infini dans les deux sens — la tuile se répète par modulo, donc le nombre d’éléments dans la page dépend de la taille de la fenêtre, jamais de la distance parcourue. On peut tirer pendant une heure sans rien ajouter.
• Une seule écriture par image — les vignettes sont placées une fois pour toutes ; à chaque image de l’animation, le composant écrit exactement une transformation, quel que soit le nombre de photos à l’écran.
• Lancer et inertie — le mur se jette et glisse jusqu’à l’arrêt, avec un frottement réglable. Une dérive lente peut l’animer tout seul au repos.
• Quatre gestes — la molette, le trackpad à deux doigts qui panoramique en diagonale, le glissement à la souris ou au doigt, et le clavier : flèches pour déplacer, Maj pour aller plus vite, Début pour recentrer. Ce qu’on pose par-dessus garde ses propres clics, et data-ic-wheel="off" rend la molette à la page quand le mur n’est qu’une section parmi d’autres.
• Marche sans JavaScript — le mur redevient une grille en colonnes qui défile, à la même largeur de colonne, la même gouttière et le même rayon.
• Une variable pour l’échelle — toutes les mesures dérivent de la taille du texte : colonne, gouttière, rayons et pastille suivent ensemble.
• Deux façons de remplir — colonnes équilibrées, dont le raccord est exact au pixel, ou maçonnerie gloutonne, qui reproduit la référence position pour position.

Le poser dans une page

Deux fichiers à charger, puis vos images :

<link rel="stylesheet" href="infinite-canvas.css">
<script src="infinite-canvas.js" defer></script>

<div class="infinite-canvas" data-infinite-canvas>
  <div class="infinite-canvas__source">
    <img class="infinite-canvas__img" src="1.webp" width="600" height="600" alt="…">
    <img class="infinite-canvas__img" src="2.webp" width="735" height="413" alt="…">
    <img class="infinite-canvas__img" src="3.webp" width="600" height="800" alt="…">
  </div>
</div>

C’est tout : l’attribut data-infinite-canvas suffit, le composant s’installe au chargement de la page — et aussi sur les murs qu’un framework insère plus tard. Donnez-lui une hauteur en CSS, il n’en suppose aucune.

Les attributs width et height ne sont pas décoratifs : ils donnent le format de chaque image à la mise en page sans attendre son décodage. Sans eux, le mur attend le chargement et se reconstruit ensuite.

Ce qu’il faut savoir

• Ne changez pas la taille du texte à l’intérieur. Les mesures sont des em, et un em se résout sur l’élément qui l’utilise, pas sur celui qui le déclare. Réglez --ic-font-size sur le bloc, tout suit ; posez un font-size sur un enfant, tout se décale.
• Le cadre découpe, il ne défile pas. Une fois le script en place, le mur passe en overflow: clip et non hidden : une boîte hidden reste défilable par script, et le navigateur la fait défiler de lui-même pour révéler ce qui vient de prendre le focus — ce qui décalerait le mur sans que rien ne le remette en place.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site, et n’utilise jamais innerHTML : une légende venant d’une base de données ne peut pas injecter de balise.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’un composant Framer commercial, relevées sur la page publiée : colonne de 300 px, gouttière de 8 px, cinq formats d’image, et une pastille de 202 sur 50. Le code, lui, est original — rien n’a été repris de son implémentation, et les images de la démo sont les nôtres.