Vous arrivez sur un site, faites défiler la page, et le logo dans un coin tourne en douceur, réagissant à chaque mouvement de la molette. Cela donne une impression de dynamisme et de maîtrise technique, et ajoute cette petite touche que les visiteurs remarquent.

Créer cette rotation est plus simple qu’il n’y paraît. Vous n’avez pas besoin de bibliothèques lourdes ni de mégaoctets de frameworks d’animation. Il vous suffit d’une div, de quelques lignes de CSS et d’un seul bloc de JavaScript.

Voici un découpage étape par étape: de la préparation de l’image à l’adaptation pour les écrans mobiles. Le code est testé, fonctionnel et sans aucune dépendance.

💡 Aperçu rapide:

• Préparez un objet SVG ou PNG et insérez-le dans le HTML
• Fixez sa position avec position: fixed et définissez les décalages en unités viewport
• Ajoutez un gestionnaire d’événement scroll en JavaScript qui fait tourner l’objet via transform: rotate()
• Ajustez la vitesse de rotation en divisant window.scrollY par un coefficient
• Pour le mobile, ajoutez une media query avec un nouveau positionnement et un temps de transition

1. Préparation de l’objet

L’objet peut être n’importe quoi: une icône, un logo, une forme vectorielle, un symbole de flèche. Je recommande le SVG, il ne perd pas en netteté lors des transformations et ne pèse quasiment rien. Si la transparence est critique et que vous n’avez pas de vectoriel, un PNG fera l’affaire.

Placez l’image dans un div conteneur et insérez-le dans le body, de préférence vers le haut. Un div distinct simplifie la gestion: vous pourrez plus tard ajouter des éléments voisins ou remplacer l’image sans toucher à la logique de positionnement.

1
<div id="scrollContainer">
2
  <img src="img/scrollObject.svg" alt="scrollObject" id="scrollObject">
3
</div>

Vous pouvez avoir plusieurs objets, il suffit d’attribuer à chacun un id unique et de dupliquer la logique JS en la liant à son propre élément. Mais pour l’instant, construisons un seul exemplaire fonctionnel.

2. Positionnement en CSS

Où placer l’objet? Cela dépend de l’objectif:

• Coin inférieur droit, une icône miniature qui ne gêne pas le contenu. Classique pour les blogs et portfolios.
• Coin supérieur gauche, indicateur de position de défilement (roue de progression).
• Centre du bord inférieur, grand élément décoratif attirant l’attention sur le pied de page.

Prenons le scénario du coin inférieur droit, il est universel et ne masque pas la navigation. En CSS, écrivez:

1
#scrollObject {
2
  position: fixed;
3
  right: 3vw;
4
  bottom: 3vh;
5
  top: auto;
6
  width: 7vh;
7
  height: auto;
8
  transition: 0.1s ease-out;
9
}

La clé est position: fixed. Cela fixe l’élément par rapport à la fenêtre du navigateur, et non au document. Lors du défilement, le contenu bouge mais l’objet reste en place. Les unités vw et vh (pourcentages de la largeur et de la hauteur de la fenêtre) ajustent automatiquement les décalages pour tout écran, du smartphone au moniteur 4K.

La propriété transition: 0.1s ease-out lisse les à-coups lors des changements de position. Pour la rotation, son rôle est secondaire, mais lors d’un redimensionnement ou d’un changement de media query, la transition est plus propre.

3. Animation de rotation avec JavaScript

Le CSS peut faire de simples @keyframes, mais notre objectif est de lier l’angle de rotation à la position de défilement. C’est là que JavaScript intervient. Code minimal fonctionnel:

1
const scrollObject = document.getElementById("scrollObject");
2
 
3
window.addEventListener("scroll", () => {
4
  scrollObject.style.transform = `rotate(${window.scrollY}deg)`;
5
});

Voici ce qui se passe: window.scrollY renvoie le nombre de pixels dont la page a défilé verticalement. Ce nombre est inséré dans la fonction CSS rotate(), un pixel de défilement équivaut à un degré de rotation.

Si l’objet tourne trop vite, divisez la valeur par un coefficient:

1
const speedFactor = window.scrollY / 2;
2
const scrollObject = document.getElementById("scrollObject");
3
 
4
window.addEventListener("scroll", () => {
5
  scrollObject.style.transform = `rotate(${speedFactor}deg)`;
6
});

Choisissez un diviseur adapté à la longueur de votre page. Une valeur de /2 ralentit la rotation de moitié, /4 la rend douce et à peine perceptible. Pour les longues pages d’atterrissage, utilisez /6 ou /8 pour que l’objet ne fasse pas dix rotations complètes au milieu de la page.

Note sur la performance

L’événement scroll se déclenche des dizaines de fois par seconde. Sur un site simple avec un seul transform, c’est imperceptible, mais si vous avez plusieurs objets animés ou un DOM lourd, enveloppez la logique dans requestAnimationFrame:

1
const scrollObject = document.getElementById("scrollObject");
2
let ticking = false;
3
 
4
window.addEventListener("scroll", () => {
5
  if (!ticking) {
6
    requestAnimationFrame(() => {
7
      scrollObject.style.transform = `rotate(${window.scrollY}deg)`;
8
      ticking = false;
9
    });
10
    ticking = true;
11
  }
12
});

requestAnimationFrame regroupe les appels dans les trames de synchronisation du navigateur (généralement 60 fps) et ne relance pas le recalcul de style à chaque événement de défilement, ce qui économise le processeur et la batterie sur mobile.

Ajoutez également will-change: transform à la règle CSS #scrollObject. Cela indique au navigateur d’allouer un calque de composition GPU à l’avance, et la rotation sera accélérée matériellement:

1
#scrollObject {
2
  /* ... other properties ... */
3
  will-change: transform;
4
}

4. Adaptation mobile

Sur les écrans de moins de 600 pixels, le coin inférieur droit peut entrer en conflit avec les menus burger ou les boutons «retour en haut». Une solution judicieuse consiste à déplacer l’objet en bas au centre pour qu’il ne couvre pas les éléments interactifs:

1
@media only screen and (max-width: 600px) {
2
  #scrollObject {
3
    transition: 0.2s ease-out;
4
    margin-left: -4vh;
5
    width: 8vh;
6
    height: auto;
7
    top: 10px;
8
    left: 50%;
9
  }
10
}

L’objet se déplace en haut de l’écran, centré avec left: 50% et une margin-left négative, une technique classique de centrage horizontal. La largeur est légèrement augmentée (8vh au lieu de 7vh) pour compenser la distance de vision plus courte.

Notez la transition: 0.2s ease-out dans la media query. Lors du passage du bureau au mobile (ou lors du redimensionnement de la fenêtre), l’objet ne «saute» pas instantanément mais se déplace en douceur vers la nouvelle position en 0,2 seconde.

Si vous travaillez avec Vue ou React, extrayez l’objet de défilement dans un composant séparé. Vous pouvez l’attacher à la racine App.vue ou dans le layout pour que l’animation soit présente sur toutes les pages à la fois, sans duplication de code.

Alternative moderne: animations CSS liées au défilement

En 2024-2025, les navigateurs Chromium (Chrome, Edge, Opera) ont acquis le support natif de animation-timeline: scroll(), des animations liées au défilement sans une seule ligne de JavaScript. Cela ressemble à ceci:

1
@keyframes rotate {
2
  to { transform: rotate(360deg); }
3
}
4
 
5
#scrollObject {
6
  animation: rotate linear;
7
  animation-timeline: scroll();
8
}

Avantage: zéro JavaScript, inconvénient: uniquement dans Chromium pour l’instant (Firefox et Safari sont en cours d’implémentation). Pour une amélioration progressive, vous pouvez combiner: donnez la version CSS aux navigateurs modernes et conservez le gestionnaire JS comme solution de repli pour les autres. Détails sur MDN.

⁉️🤔 Foire aux questions

Puis-je animer non seulement la rotation, mais aussi l’échelle ou l’opacité?

Oui. transform accepte plusieurs fonctions à la fois. Pour faire tourner et rétrécir un objet au défilement: scrollObject.style.transform = \rotate(${window.scrollY}deg) scale(${1 - window.scrollY / 5000});. L’opacité se gère séparément de transform via opacity. Combinez jusqu’à cinq ou six paramètres, mais testez: des transformations multiples sur des appareils peu puissants peuvent provoquer des micro-saccades. Un ou deux paramètres plus will-change: transform est un plafond sûr pour 60 fps.

Quel est le meilleur choix: SVG ou PNG pour l’animation?

SVG, sans hésitation. Il s’adapte sans perte de netteté à toute rotation et résolution d’écran, pèse moins lourd, et le navigateur le rend en vectoriel (pas d’escalier de pixels sur les bords après rotate). Prenez du PNG uniquement si vous avez déjà un graphique matriciel prêt et pas le temps de le refaire. Évitez le JPEG pour les objets en rotation, les artefacts de compression deviennent plus visibles après rotation.

Comment faire démarrer l’animation uniquement lorsque l’objet est dans la zone visible?

Utilisez IntersectionObserver. Au lieu de vous lier au scroll global, vous surveillez si l’objet est entré dans la fenêtre d’affichage et activez la rotation seulement à ce moment-là. Cela économise des ressources lorsque l’élément est hors écran. Modèle de base: créez un observateur avec threshold: 0, dans la fonction de rappel ajoutez/supprimez une classe .active, et liez le gestionnaire de défilement JS à la présence de cette classe.

Pourquoi l’animation saccade-t-elle sur mon site?

Trois causes typiques. Premièrement: pas de will-change: transform, le navigateur ne confie pas l’élément à la composition GPU et recalcule la mise en page à chaque trame. Deuxièmement: des propriétés provoquant un reflow (comme width, height, margin ou padding) sont appliquées à l’élément dans le même gestionnaire de défilement. Remplacez-les par transform: scale() et transform: translate(). Troisièmement: la fonction de rappel de défilement s’exécute sans requestAnimationFrame et génère des repeints supplémentaires entre les trames. Enveloppez la logique dans le modèle rAF (exemple dans la section «Note sur la performance»).

JavaScript est-il obligatoire? Il existe des solutions purement CSS.

Les @keyframes CSS sont liées au temps, pas à la position de défilement. Oui, animation-timeline: scroll() change la donne, mais le support des navigateurs est encore incomplet (voir section 4). À mi-2026, la solution JavaScript avec scrollY + transform reste le moyen multi-navigateur le plus fiable pour lier la rotation au défilement. L’intégralité du code tient en 5 lignes, n’a aucune dépendance et fonctionne d’Internet Explorer 10 jusqu’aux dernières versions de Chrome.

Faut-il ajouter une animation au défilement sur votre site?

Faire tourner un objet au défilement n’est pas qu’un simple «truc cool». C’est une micro-interaction qui donne au visiteur un retour tactile: «je fais défiler la page et quelque chose se produit». Bien configurée, elle n’irrite ni ne distrait, mais ajoute de la personnalité au site.

Si le site est minimaliste, limitez-vous à un petit objet dans le coin et un coefficient de /4 ou /6. Pour les pages d’atterrissage et les portfolios, vous pouvez jouer plus audacieux: un grand élément central avec /2, une animation combinée de rotation et d’échelle, un changement d’image lorsqu’un certain scrollY est atteint.

Règle principale: l’animation au défilement doit compléter le contenu, pas rivaliser avec lui pour attirer l’attention. Un seul objet, un mouvement fluide, aucune intrusion, et votre site marquera les esprits.