Ce qu'elle dit.
Textes, photos, liens et éléments des listes : ce que la tile raconte.
Comment elle apparaît.
Couleurs, polices, bordures, espaces et dimensions, y compris différents selon l'ordinateur, la tablette et le téléphone.
Comment elle se comporte.
Quand elle entre en scène, comment elle bouge, à qui elle s'affiche, où elle se place. Les exemples du catalogue l'effleurent à peine.
Entre en scène.
35 animations pour l'arrivée de la tile : fondu, glissement, zoom, rotation, rebond, machine à écrire, rideau… On règle la durée, le délai, l'intensité et la courbe : des tiles différentes peuvent entrer l'une après l'autre.
Revient à chaque passage.
17 autres animations, du fondu au Ken Burns, qui démarrent quand la tile arrive à l'écran. Elles peuvent repartir chaque fois que tu repasses, et faire entrer en séquence ce que la tile contient.
Remonte un peu
et redescends : elle rentre à chaque fois.
Bouge avec la page.
Pendant que tu fais défiler, la tile se déplace, pivote, change de taille, de transparence ou de flou, à un rythme bien à elle. Chaque propriété a ses propres étapes, du début à la fin du trajet.
Suit une courbe.
Tu dessines un tracé dans le builder et la tile le suit pendant que tu fais défiler. À chaque étape, tu décides de la position, de la rotation, de la taille et de la transparence.
Reste là où il faut.
La tile reste immobile pendant que le reste de la section défile, et repart toute seule quand la section se termine : un sommaire, une photo, un bouton d'achat. En haut ou en bas, à la distance que tu veux, même sur téléphone.
Tu es en train de le voir : sur ordinateur et tablette, la liste des huit effets à côté de ce texte utilise précisément cette option.
Répond à la souris.
L'inclinaison 3D suit le pointeur, même seulement sur les photos d'une galerie. La tile peut suivre le curseur, ou allumer une torche qui inverse les couleurs sous le pointeur. Et pour tout le site, il y a le curseur magnétique, qui s'accroche aux liens et aux boutons, et le viseur avec les coordonnées. Sur téléphone, où il n'y a pas de souris, la page reste telle quelle.
Allume
la lumière.
Ne reste jamais immobile.
Huit mouvements qui se répètent sans fin : flottement, aussi avec rotation, pulsation, rotation, balancement, rebond, oscillation et respiration. Vitesse, amplitude, délai et direction se règlent : parfaits pour les icônes, les badges et les décorations.
Prend forme.
Découpe la tile en une forme : cercle, ellipse, triangle, hexagone, étoile, losange, blob, ou une forme à toi écrite en CSS. Cela vaut pour les photos, les vidéos, les cards et les textes.
Chaque photo s’arrête à une distance différente du haut : en faisant défiler, la suivante se pose dessus. Quatre tiles avec le Défilement fixe, rien d’autre.
Fais défiler lentement et regarde le jeu se former.
À qui il faut,
quand il faut.
Une tile peut être présente pour certains et pas pour d'autres. Les conditions sont vérifiées par le serveur : celui qui ne doit pas voir la tile ne la reçoit même pas.
Fenêtre large :
tu es sur ordinateur.
Fenêtre moyenne :
peut-être une tablette.
Fenêtre étroite :
tu es sur téléphone.
Il y a ici trois phrases, une par format, et tu n'en vois qu'une seule. Sur ordinateur, essaie de rétrécir la fenêtre.
Exactement
où tu veux.
D'habitude, une tile occupe toute la largeur de la colonne et suit les autres. Mais tu peux la déplacer, la superposer ou la fixer à l'écran, avec des valeurs différentes pour chaque appareil.
Pour ceux qui lisent,
et pour ceux qui cherchent.
Les mêmes tiles parlent bien aux lecteurs d'écran et aux moteurs de recherche, sans plugin en plus.