L’effet « trail » est une autre tendance du développement web qui, bien que techniquement complexe, apporte une dimension interactive aux sites. J’ai voulu l’explorer en créant une grille interactive où des images suivent votre curseur ou votre doigt, formant une traînée visuelle captivante.
Ce que vous voyez en haut de page c’est une grille ou chaque cellule capte le mouvement de notre cursor ou de notre doigt et déclenche l’apparition d’images qui se superposent puis disparaissent progressivement.
Comment ça marche ?
Le principe est assez simple à comprendre mais complexe à implémenter correctement :
- Une grille invisible de 12×12 cellules est dessinée sur un canvas
- Quand vous bougez votre curseur, le script détecte quelle cellule est survolée
- Une image apparaît à cet endroit, tandis que la précédente s’efface en douceur
- Après quelques secondes d’inactivité, même la dernière image s’évanouit
La magie opère grâce à un ensemble de transitions CSS qui gèrent l’opacité et l’échelle des images, créant cette sensation de « trail » fluide et organique.
La galere du mobile car on ne peux pas joeur avec un effet et scroller un site en même temps
J’avais déjà codé cet effet sur ordinateur il y a 4 ans pendant le confinement, mais il ne fonctionnait pas correctement sur mobile car je ne suivais pas les mouvements du doigt. J’avais abandonné mais en me cassant un peu la tête récemment j’ai réussi à l’adapter. J’ai aussi compris pourquoi on voit si rarement des effets « trail » sur mobile.
Sur mobile, quand vous glissez votre doigt, le navigateur ne sait pas si vous voulez faire défiler la page ou interagir avec l’effet. J’ai dû mettre en place une fonction pour analyser l’angle et la distance de votre mouvement pour deviner votre intention.
// Fonction pour déterminer l'intention de l'utilisateur
function determineUserIntent(currentX, currentY) {
const totalDeltaX = currentX - touchStartX;
const totalDeltaY = currentY - touchStartY;
const angle = calculateAngle(totalDeltaX, totalDeltaY);
// Si le mouvement est clairement vertical, c'est probablement un scroll
if (isVerticalScrolling(angle) && Math.abs(totalDeltaY) > 20) {
return true; // Mode défilement
}
return false; // Mode interaction
}Restons fluide au maximum
Pour que tout reste fluide, j’ai dû implémenter plusieurs techniques d’optimisation :
- Limitation des images actives : max de 8 images simultanées pour éviter de surcharger la mémoire
- Accélération matérielle : utilisation de
transform: translateZ(0)etwill-changepour forcer le GPU à prendre le relais - Système de cache : les calculs de position sont mis en cache pour éviter des recalculs coûteux
- Nettoyage périodique : les images sont supprimées toutes les 15 secondes
Si vous souhaitez intégrer cet effet sur ton site ou si tu veux examiner le code en détail, n’hésitez pas à me contacter.
