Effets avances 8 variantes

Les effets qui demandent une surface de dessin. Tout est en WebGL et canvas 2D natifs : aucune bibliotheque, aucun CDN — Three.js ferait 600 Ko pour ce qui tient ici en soixante lignes. Quatre regles : l'effet est decoratif et se pose derriere le contenu, le rendu s'arrete des que le bloc sort du champ, prefers-reduced-motion fige l'image sur une frame, et si quoi que ce soit echoue le canvas est retire pour laisser le fond CSS du conteneur.

A. Fonds generatifs

Degrade fluide en WebGL, champ de points reactif, nuee de particules, ondes de bruit. Ce qui remplace aujourd'hui la boucle video de 4 Mo.

Votre facture de chauffage divisee par trois Etude thermique offerte, aides deduites du devis

Degrade fluide en WebGL

Une banniere dont le fond bouge lentement, sans video ni image. Le shader tient en trente lignes et pese zero octet de plus que le script : c'est ce qui remplace aujourd'hui la boucle video de 4 Mo.

Voir le codeMasquer le code

<div class="cv" data-cv="fluide">
  <canvas aria-hidden="true"></canvas>
  <div class="cv__contenu">
    <strong>Votre facture de chauffage divisee par trois</strong>
    <span>Etude thermique offerte, aides deduites du devis</span>
  </div>
</div>

/* Aucun style specifique : le socle .cv suffit. Voir js/canvas.js. */

WebGL natif : deux triangles, un fragment shader, aucune bibliotheque

1 240 installations depuis 2009 Deplacez le curseur sur la trame

Champ de points reactif

Une trame qui s'ecarte au passage du curseur. Sur un fond de section, elle donne de la matiere sans jamais gener la lecture du texte pose dessus.

Voir le codeMasquer le code

<div class="cv cv--clair" data-cv="points">
  <canvas aria-hidden="true"></canvas>
  <div class="cv__contenu cv__contenu--sombre">
    <strong>1 240 installations depuis 2009</strong>
    <span>Deplacez le curseur sur la trame</span>
  </div>
</div>

.cv--clair { background: var(--c-surface); }
.cv__contenu--sombre { color: var(--c-text); }
.cv__contenu--sombre span { opacity: .6; }

canvas 2D : une grille de points, deplacement inverse a la distance au curseur

Reseau d'artisans partenaires 42 poseurs en Ile-de-France

Nuee de particules

Reliees entre elles quand elles se rapprochent. Tres vu, donc a n'employer que discret : peu de particules, lentes, faiblement contrastees.

Voir le codeMasquer le code

<div class="cv" data-cv="particules">
  <canvas aria-hidden="true"></canvas>
  <div class="cv__contenu">
    <strong>Reseau d'artisans partenaires</strong>
    <span>42 poseurs en Ile-de-France</span>
  </div>
</div>

/* aucun style specifique : le socle .btn suffit */

canvas 2D : n particules, un trait entre deux points a moins de 110 px

Etude thermique du logement Deperditions calculees piece par piece

Ondes de bruit

Des lignes qui ondulent selon un bruit continu. Le rendu evoque une carte topographique : registre technique, etude, mesure.

Voir le codeMasquer le code

<div class="cv" data-cv="ondes">
  <canvas aria-hidden="true"></canvas>
  <div class="cv__contenu">
    <strong>Etude thermique du logement</strong>
    <span>Deperditions calculees piece par piece</span>
  </div>
</div>

/* aucun style specifique : le socle .btn suffit */

canvas 2D : 40 lignes, deplacement vertical par bruit sinusoidal compose

B. Effets sur le contenu

Revelation au curseur, trainee, texte en trame, et le fond fige de secours.

Avant

Apres

Revelation au curseur

Deux versions d'une meme image, la seconde revelee dans un disque qui suit le curseur. Sert a montrer un avant / apres sans bouton ni curseur a faire glisser.

Voir le codeMasquer le code

<div class="cv-reveler" data-cv-reveler>
  <div class="cv-reveler__bas"><span>Avant</span></div>
  <div class="cv-reveler__haut"><span>Apres</span></div>
</div>

.cv-reveler {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: crosshair;
}
.cv-reveler > div { position: absolute; inset: 0; display: grid; place-items: center; }
.cv-reveler__bas  { background: linear-gradient(140deg, #4a4038, #7a6a5a 60%, #b0a495); }
.cv-reveler__haut {
  background: linear-gradient(140deg, #2f5a45, #7aa88a 60%, #c9ddc4);
  /* Sans JavaScript, le disque reste au centre : les deux etats sont visibles. */
  clip-path: circle(110px at var(--x, 50%) var(--y, 50%));
  transition: clip-path 90ms linear;
}
.cv-reveler span {
  padding: 6px 13px;
  border-radius: var(--r-full);
  background: rgba(10,12,18,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.cv-reveler__bas span { align-self: end; justify-self: start; margin: var(--sp-4); }
.cv-reveler__haut span { align-self: end; justify-self: end; margin: var(--sp-4); }

clip-path: circle(120px at var(--x) var(--y)) pilote au pointermove

Deplacez le curseur La trainee s'efface en une seconde

Trainee du curseur

Un trait qui suit le pointeur avec du retard. Signature de site vitrine ; sur un outil de travail, il devient vite fatigant.

Voir le codeMasquer le code

<div class="cv cv--clair" data-cv="trainee">
  <canvas aria-hidden="true"></canvas>
  <div class="cv__contenu cv__contenu--sombre">
    <strong>Deplacez le curseur</strong>
    <span>La trainee s'efface en une seconde</span>
  </div>
</div>

/* aucun style specifique : le socle .btn suffit */

canvas 2D : file des 24 dernieres positions, epaisseur decroissante

Texte en trame

Un titre rendu en points plutot qu'en lettres pleines. Le texte reste dans le balisage pour la lecture et le referencement ; la trame n'est qu'un calque decoratif par-dessus.

Voir le codeMasquer le code

<div class="cv cv--clair cv--texte" data-cv="trame" data-cv-texte="RENOVATION">
  <canvas aria-hidden="true"></canvas>
  <h2 class="sr-only">RENOVATION</h2>
</div>

.cv--texte { min-height: 190px; background: var(--c-surface); }

canvas 2D : le texte est dessine hors ecran, puis echantillonne en grille

Le contenu reste toujours complet Aucun texte, aucune action ne depend du canvas

Fond fige de secours

Ce que voit l'utilisateur si le canvas ne demarre pas : WebGL indisponible, script bloque, ou mouvement reduit demande. Un degrade fixe, jamais un rectangle vide.

Voir le codeMasquer le code

<div class="cv cv--repli">
  <div class="cv__contenu">
    <strong>Le contenu reste toujours complet</strong>
    <span>Aucun texte, aucune action ne depend du canvas</span>
  </div>
</div>

.cv--repli {
  background-color: #141a26;
  background-image:
    radial-gradient(at 16% 20%, #2f4a7a 0px, transparent 50%),
    radial-gradient(at 84% 26%, #6b3a5a 0px, transparent 46%),
    radial-gradient(at 62% 84%, #7a4a2f 0px, transparent 48%);
}
/* Tous les blocs .cv portent ce fond de repli : si le canvas ne se dessine
   pas, on obtient une banniere correcte plutot qu'un aplat noir. */
.cv {
  background-image:
    radial-gradient(at 16% 20%, #22354f 0px, transparent 52%),
    radial-gradient(at 84% 30%, #3d2a44 0px, transparent 48%);
}
.cv--clair { background-image: none; }

le fond du conteneur est peint en CSS, le canvas se superpose s'il demarre