Animations au défilement

Les éléments entrent au moment où le regard arrive. Rien n'apparaît trop tôt, rien ne se fait attendre.

Transitions fluides

Le passage d'une section à l'autre est continu. La page se déplie au lieu de sauter d'un bloc au suivant.

Parallaxe

Les plans avancent à des vitesses différentes. C'est cet écart que l'œil lit comme de la profondeur.

Micro-interactions

Chaque bouton, chaque champ répond au geste. Un site qui réagit passe pour rapide, même à vitesse égale.

Animations de texte et d'image

Les titres se révèlent, les visuels se dévoilent. Le rythme de lecture est écrit comme un montage.

Storytelling visuel

Votre métier raconté par une scène qui se construit, plutôt que par trois paragraphes de plus.

Effets premium au survol

Sur ordinateur, les cartes se soulèvent et la lumière suit le curseur. Sur téléphone, l'appui répond.

3D et WebGL

Pour les projets les plus avancés : objets en trois dimensions, matières et lumières temps réel.

Ce qui est inclus

Animations pensées scène par scène, pas ajoutées après coup
Fluidité vérifiée sur téléphone d'entrée de gamme
Mouvement désactivé pour qui le demande dans son système
Aucun défilement ralenti ni détourné
Contenu visible des moteurs de recherche
Responsive sur mobile, tablette et ordinateur
Hébergement et nom de domaine pris en charge
Devis détaillé sous 24h

Notre méthode

01

Intention

Ce que le mouvement doit faire comprendre : le métier, le soin, la vitesse. Sans intention, il n'y a que des effets.

02

Storyboard

Chaque scène est découpée avant d'être codée : ce qui entre, quand, et dans quel ordre.

03

Intégration

Animations construites sur les deux seules propriétés que le navigateur sait animer sans recalculer la page.

04

Mesure

Rythme des images mesuré sur un profil mobile au processeur ralenti. Une scène qui saccade n'est pas livrée.

Site web animé : à quoi sert vraiment le mouvement

Un site animé n'est pas un site avec des effets. C'est un site dont le rythme a été écrit : ce qui apparaît, à quel moment, et dans quel ordre. La différence se voit tout de suite, même si personne ne sait la nommer. Un visiteur ne dira jamais « la séquence d'entrée est bien réglée » ; il dira que le site fait sérieux, ou qu'il a envie de continuer à descendre. C'est exactement ce qu'on cherche.

Ce que le mouvement apporte, concrètement

Il guide le regard : ce qui bouge est lu en premier, donc l'ordre de lecture devient un choix et non un hasard
Il fait patienter sans frustrer : une apparition progressive occupe l'œil pendant que le reste charge
Il montre le soin : un site qui répond au doigt et au curseur paraît mieux fait, à contenu identique
Il raconte : une scène qui se construit au défilement remplace un paragraphe explicatif
Il distingue : sur un marché où tout le monde a le même gabarit, le rythme est ce qui reste en mémoire

Ce qui fait échouer un site animé

Presque toujours la même chose : le mouvement a été ajouté à la fin, sur un site déjà fini. On obtient alors des effets qui s'empilent sans se répondre, un défilement qui devient poisseux, et un téléphone qui chauffe. L'animation doit être décidée avec la maquette, parce qu'elle change la composition : un titre qui doit monter a besoin d'air au-dessus de lui.

L'autre échec est technique et se voit surtout sur mobile. Animer une ombre, un flou ou une hauteur oblige le navigateur à repeindre de grandes surfaces à chaque image. Animer un déplacement ou une opacité ne lui demande que de recomposer ce qu'il a déjà. C'est la même animation à l'œil, et un écart de plusieurs images par seconde sur un téléphone d'entrée de gamme.

Le mouvement réduit n'est pas une option

Une part des visiteurs a activé le mouvement réduit dans son système, souvent pour des raisons médicales — troubles vestibulaires, migraines, sensibilité au défilement parallaxe. Un site animé correct lit ce réglage et sert la même page, montée et immobile. Ce n'est ni une version dégradée ni un travail en plus : c'est l'état final de la scène, celui que tout le monde finit par voir.

Faut-il un site animé pour votre activité ?

Pas toujours, et le dire fait partie du conseil. Un artisan dont les clients cherchent un numéro de téléphone a besoin d'une page rapide et claire, pas d'une mise en scène. Le mouvement se justifie quand la différenciation compte : marque, agence, studio, produit haut de gamme, site de lancement, portfolio. Dans ces cas, il devient le premier argument, avant même le texte.

Questions fréquentes

Un site animé est-il plus lent ?+

Il n'a aucune raison de l'être. Tout passe par le déplacement et l'opacité, les deux propriétés que le navigateur traite sans refaire la mise en page. Le rythme est mesuré sur un profil mobile au processeur ralenti quatre fois avant livraison : une scène qui saccade est retravaillée, pas livrée.

Les animations gênent-elles le référencement ?+

Non. Le texte est présent dans la page envoyée par le serveur, lisible par Google avant toute animation. Ce qui nuit au référencement, ce sont les contenus qui n'existent qu'après un geste de l'utilisateur : nous ne procédons pas ainsi.

Et si un visiteur n'aime pas les animations ?+

Les systèmes d'exploitation proposent un réglage de mouvement réduit. Nos sites le respectent : le visiteur qui l'a activé reçoit la même page, montée et immobile.

Quelle différence avec un site vitrine classique ?+

Un site vitrine présente votre activité. Un site animé la met en scène. Le premier démarre à 345 €, le second à 790 € : l'écart paie le storyboard, les maquettes supplémentaires et le travail de rythme.

Combien coûte un Motion Website ?+

À partir de 790 € pour un site animé, 1 290 € pour la version premium avec récit au défilement et animations sur mesure. Les projets à forte composante technique — 3D, WebGL — se chiffrent au périmètre. Devis sous 24h.

Des sites web qui prennent vie.