Faire un site web animé sur Framer

Poser la hero section dans Framer

L’exercice : la hero section d’une page de vente de jeu vidéo. Avant de dessiner, active les breakpoints tablette et mobile. Le desktop est marqué primary : ce que tu y ajoutes se répercute sur les deux autres.

La section est une frame à laquelle tu appliques immédiatement un layout : sans lui, tu restes en placement libre et les alignements deviennent approximatifs. Largeur en fill pour prendre 100 % du parent, hauteur en viewport pour occuper l’écran, parent en fit content pour que la page fasse la taille de son contenu.

Superposer trois images avec le z-index

L’effet de profondeur repose sur trois calques :

• l’image de fond, en position absolute, largeur et hauteur relatives à 100 %, z-index 0 ;
• le logo, placé comme élément frère de l’image et non comme enfant, en absolute, z-index 1 ;
• la même image de fond dupliquée mais détourée, z-index 2, qui fait repasser les personnages devant le logo.

Le détourage se prépare en amont, en dehors de Framer. Les deux images ayant la même dimension, la superposition reste invisible quand la fenêtre change de taille.

Une navigation fixe en trois zones

La navigation est une frame sortie de la hero section, en position fixed pour rester figée en haut quand la page défile, en largeur relative à 100 % et avec un z-index élevé. Dedans, un conteneur en fill, en fit content en hauteur, avec 32 pixels de padding à gauche et à droite. Puis trois frames en distribution space between : réseaux sociaux, logo, liens.

Icônes et liens

Les icônes sont intégrées à Framer, épaisseur des traits réglable. Une icône seule ne reçoit pas de lien : il faut l’envelopper dans une frame, qui sert aussi à agrandir la zone cliquable avec du padding. Un texte, lui, reçoit le lien directement.

Le logo qui refuse de rester centré

Dès que les deux zones latérales n’ont pas la même largeur, celle du milieu est poussée sur le côté.

Le contenu : overlay, titre composé et bouton dégradé

Le bloc de texte se cale en bas de la section en réglant sa distribution sur end. L’assombrissement du bas de l’image n’est pas un voile uni : c’est un dégradé linéaire noir posé en fond du bloc, dont le point du haut repasse en transparence. Le padding latéral reprend les 32 pixels de la navigation, ce qui aligne tout.

Aligner une image sur un texte

Le titre mélange deux textes et une image, qui ne s’aligne jamais parfaitement quelle que soit sa taille. Plutôt que de tâtonner, enveloppe-la dans un stack et ajoute du padding en haut : le décalage se règle au pixel.

Une bordure en dégradé

En CSS, une bordure ne prend pas de dégradé, seulement une couleur unie. La parade tient en deux frames : une frame extérieure avec le dégradé linéaire en fond, un radius et 2 pixels de padding, et à l’intérieur une frame pleine au même radius. Les 2 pixels qui dépassent font la bordure, et le texte va dans la frame intérieure.

Responsive et animations d’apparition

Tablette et mobile

En tablette, il suffit souvent de réduire les textes et l’image. En mobile, tu ramènes le padding latéral à 16 des deux côtés, tu descends encore les titres, et tu passes le bloc de contenu en direction verticale : retire le space between pour revenir en center, ce qui réactive le gap.

Pour le menu burger, enveloppe les liens dans un stack en fit content, puis construis l’icône avec des frames empilées et un radius élevé. Crée-la sur le desktop pour qu’elle existe sur tous les breakpoints, puis joue sur la visibilité : masquée en desktop et en tablette, affichée en mobile, où les liens disparaissent.

Les effets d’apparition

Tout se passe dans l’onglet effects du panneau de style, sur le déclencheur on appear : les images de fond passent d’une opacité 0 à 100 sur une seconde. Un effet réglé se copie et se colle sur un autre calque, ce qui évite de tout refaire.

Le reste est une affaire de délais : le logo arrive avec un décalage vertical, la navigation descend de 33 pixels, chaque texte retarde son entrée de quelques dixièmes de seconde.

C’est ce décalage qui empêche la page d’apparaître d’un bloc.

Deux subtilités. Un texte a droit à un type d’animation qui lui est propre, caractère par caractère, avec un délai de 0,05 seconde entre les caractères, à ne pas confondre avec le délai de l’animation. Une image n’y a pas droit, elle se contente d’un fondu. Et on appear ne se confond pas avec les déclencheurs au scroll, réservés aux éléments plus bas dans la page.

Conclusion

Une hero section animée ne demande pas de code mais de la méthode : des calques hiérarchisés, des z-index dans le bon ordre, des animations décalées.