Carte 1
Texte court qui décrit la carte 1.
Aller au contenu
Page 15
Animations
Animations d’apparition, de texte et d’image, effets liés au défilement et à la souris, widgets animés et effets appliqués à toute la page. La plupart se déclenchent quand l’élément entre dans l’écran : faire défiler lentement, et recharger la page pour les rejouer.
- 15.01 Apparition au défilement
- 15.02 Animation de texte
- 15.03 Animation d’image
- 15.04 Parallaxe
- 15.05 Élément épinglé
- 15.06 Défilement horizontal
- 15.07 Effet de souris
- 15.08 Pastille au survol
- 15.09 Image révélée au survol
- 15.10 Inclinaison
- 15.11 Infobulle
- 15.12 Défilement vers une ancre
- 15.13 Apparitions simples
- 15.14 Effets de texte
- 15.15 Animated Heading
- 15.16 Typewriter
- 15.17 Floating Elements
- 15.18 Text Hover Image
- 15.19 DrawSVG
- 15.20 Stacked Cards
- 15.21 Vertical Marquee
- 15.22 Défilement lissé
- 15.23 Préchargeur
- 15.24 Indicateur de défilement
15.01
Apparition au défilement
Les blocs apparaissent quand ils entrent dans l’écran, ici par le bas et l’un après l’autre. L’animation se joue une fois ; elle s’applique à n’importe quel widget ou conteneur.
Bloc 1
Texte court qui décrit le bloc.
Bloc 2
Texte court qui décrit le bloc.
Bloc 3
Texte court qui décrit le bloc.
15.01-a
Depuis la gauche et depuis la droite
Bloc venu de la gauche
Texte court qui décrit le bloc.
Bloc venu de la droite
Texte court qui décrit le bloc.
15.01-b
Agrandissement
Bloc 1
Texte court qui décrit le bloc.
Bloc 2
Texte court qui décrit le bloc.
Bloc 3
Texte court qui décrit le bloc.
15.01-c
Bascule en 3D
Bloc 1
Texte court qui décrit le bloc.
Bloc 2
Texte court qui décrit le bloc.
Bloc 3
Texte court qui décrit le bloc.
15.01-d
Animation liée au défilement
Le bloc avance au rythme du défilement de la page, et recule si l’on remonte.
Bloc piloté par le défilement
Texte court qui décrit le bloc.
15.02
Animation de texte
Le titre apparaît lettre par lettre quand il entre dans l’écran. S’applique aux titres et aux textes.
Titre animé lettre par lettre
15.02-a
Mot par mot
Titre animé mot par mot, un mot après l’autre
15.02-b
Ligne par ligne
Texte révélé ligne par ligne, sur deux lignes ou plus, quand il entre dans l’écran. Chaque ligne monte à son tour.
15.02-c
Bascule en 3D
Titre qui bascule en trois dimensions
15.02-d
Changement d’échelle
Titre qui change d’échelle
15.02-e
Coloration au défilement
Ce texte se colore au fur et à mesure du défilement de la page. Il occupe plusieurs lignes pour que l’effet soit visible du début à la fin.
15.03
Animation d’image
L’image se dévoile par un volet qui glisse, ici de gauche à droite, quand elle entre dans l’écran.
15.03-a
Dévoilement de bas en haut
15.03-b
Agrandissement lié au défilement
15.04
Parallaxe
Pendant le défilement, chaque image se déplace à sa propre vitesse : la première plus lentement que la page, la troisième plus vite. L’effet demande le défilement lissé (fiche 15.22) et ne s’applique pas sur écran tactile.
15.05
Élément épinglé
Un bloc reste fixe à l’écran pendant que le contenu voisin défile, puis repart avec la page à la fin de la zone. Désactivé sur mobile.
Bloc épinglé
Ce bloc reste en place pendant que la colonne voisine défile.
Contenu 1
Contenu qui défile à côté du bloc épinglé.
Contenu 2
Contenu qui défile à côté du bloc épinglé.
Contenu 3
Contenu qui défile à côté du bloc épinglé.
Contenu 4
Contenu qui défile à côté du bloc épinglé.
15.06
Défilement horizontal
La section se fige et ses panneaux défilent à l’horizontale tant que l’on fait défiler la page ; le défilement vertical reprend après le dernier panneau. Sur mobile, les panneaux s’empilent.
Panneau 1
Le défilement vertical fait avancer les panneaux vers la gauche.
Panneau 2
Le défilement vertical fait avancer les panneaux vers la gauche.
Panneau 3
Le défilement vertical fait avancer les panneaux vers la gauche.
Panneau 4
Le défilement vertical fait avancer les panneaux vers la gauche.
15.07
Effet de souris
L’image se déplace légèrement en suivant la position de la souris dans la zone.
15.08
Pastille au survol
Au survol de la zone, une pastille portant un mot suit le curseur.
15.09
Image révélée au survol
Au survol d’une ligne, une image apparaît et suit le curseur. Convient à une liste de services ou de réalisations.
Ligne 1
Ligne 2
Ligne 3
15.10
Inclinaison
Le bloc s’incline en trois dimensions sous le curseur.
Titre du bloc
Texte court qui décrit le bloc.
15.11
Infobulle
Une bulle d’information s’affiche au survol d’un élément. Position, animation et couleurs se règlent.
15.11-a
En dessous, au clic
15.12
Défilement vers une ancre
Un clic fait défiler la page en douceur jusqu’à un autre endroit de la page. Ici, le bouton remonte à la fiche 15.01.
15.13
Apparitions simples
Cinq apparitions légères pour les titres, les textes et les images : révélation, agrandissement, glissement, inclinaison et bascule. Elles se rejouent à chaque entrée dans l’écran.
Révélation de bas en haut
Agrandissement
Glissement depuis la gauche
Révélation inclinée
Bascule
15.14
Effets de texte
Cinq effets réservés aux titres et aux textes : halo lumineux, machine à écrire, balayage, vague et lettres animées.
Halo lumineux
Texte tapé à la machine
Texte dévoilé par balayage
Texte rempli par une vague
Lettres animées une à une
15.15
Animated Heading
Titre dont les lettres changent de couleur en continu. Quinze modes de coloration ; ici un dégradé qui circule entre deux teintes.
Titre aux couleurs animées
15.15-a
Vague
Titre parcouru par une vague
15.15-b
Pulsation
Titre qui pulse
15.16
Typewriter
Un texte fixe suivi de mots qui s’écrivent et s’effacent tour à tour, comme tapés au clavier.
Texte fixe suivi du
15.17
Floating Elements
Images décoratives posées librement dans une zone et animées en boucle : flottement vertical, flottement horizontal, rotation, pulsation ou tremblement.
15.18
Text Hover Image
Une image apparaît et suit le curseur quand on survole un mot du titre.
Survoler ce mot pour afficher une image
15.19
DrawSVG
Le tracé d’un dessin vectoriel se dessine progressivement, puis recommence. Convient à un pictogramme, un schéma ou une signature.
15.21
Vertical Marquee
Des lignes de contenu défilent en continu de bas en haut dans une zone de hauteur fixe. Le défilement s’arrête au survol.
Ligne 1 du contenu défilant
Ligne 2 du contenu défilant
Ligne 3 du contenu défilant
Ligne 4 du contenu défilant
Ligne 5 du contenu défilant
15.22
Défilement lissé
Le défilement de la page est amorti : la page rattrape la molette avec un léger retard, ce qui adoucit le mouvement. Sans effet sur écran tactile.
Cet effet ne s’affiche pas ici : il s’applique à toute la page. Il est actif sur cette page uniquement.
15.23
Préchargeur
Une animation d’attente recouvre l’écran pendant le chargement de la page, puis s’efface. Dix-huit animations disponibles.
Cet effet ne s’affiche pas ici : il apparaît au chargement de la page. Recharger cette page pour le revoir.
15.24
Indicateur de défilement
Une barre fine en haut de l’écran se remplit à mesure que l’on avance dans la page.
Cet effet ne s’affiche pas ici : la barre se trouve tout en haut de l’écran, sur cette page uniquement.