Effets
Effets qui s’ajoutent à n’importe quel widget ou conteneur : apparition, mouvement au défilement ou à la souris, élément collant, infobulle, décor animé.
Animation d’entrée
L’élément apparaît avec une animation lorsqu’il entre dans l’écran. Une trentaine d’animations : fondu, glissement, zoom, rebond, rotation. L’animation se joue une fois au chargement.
Fondu
Fondu vers le haut
Zoom avant
Glissement depuis la gauche
Effets de défilement
L’élément se transforme à mesure que la page défile : déplacement vertical ou horizontal, transparence, flou, rotation, changement d’échelle.
Déplacement vertical
Transparence
Rotation
Échelle
Effets de la souris
L’élément réagit à la position du pointeur : il suit la souris ou s’incline en trois dimensions.
Suivi de la souris
Inclinaison 3D
Collant
L’élément reste fixé en haut ou en bas de l’écran pendant le défilement, sur toute la page ou dans les limites de son conteneur. Sur mobile, l’exemple est désactivé.
Bloc collant
Texte d’accompagnement qui défile normalement pendant que le bloc voisin reste en place.
Deuxième paragraphe, pour donner de la hauteur à la colonne et rendre le comportement visible pendant le défilement.
Troisième paragraphe d’exemple.
Quatrième paragraphe d’exemple.
Cinquième paragraphe d’exemple.
Sixième paragraphe d’exemple. Le bloc collant s’arrête à la fin de cette zone.
Animation au survol
L’élément s’anime quand le pointeur passe dessus : agrandissement, pulsation, flottement, inclinaison. Disponible sur les boutons, les images et les icônes.
Parallax
Le widget défile plus vite ou plus lentement que le reste de la page, ce qui crée un effet de profondeur.
Vitesse lente
Vitesse rapide
Sens inversé
Satellite
Petit élément (texte, icône ou image) accroché à un widget, à l’une de neuf positions : pastille, mention ou pictogramme.
Tooltip
Infobulle affichée au survol ou au clic d’un widget. Douze positions, cinq animations, contenu texte ou contenu libre mis en page.
Scroll Reveal
Le widget se dévoile à son entrée dans l’écran : fondu, glissement, zoom, retournement ou masque qui se retire.
Fondu vers le haut
Retournement
Masque
Sticky Column
Une colonne reste fixée à l’écran pendant que la colonne voisine, plus haute, défile. Sur mobile, l’exemple est désactivé.
Colonne collante
Texte d’accompagnement qui défile normalement pendant que le bloc voisin reste en place.
Deuxième paragraphe, pour donner de la hauteur à la colonne et rendre le comportement visible pendant le défilement.
Troisième paragraphe d’exemple.
Quatrième paragraphe d’exemple.
Cinquième paragraphe d’exemple.
Sixième paragraphe d’exemple. Le bloc collant s’arrête à la fin de cette zone.
Particles
Décor animé de particules reliées entre elles, placé en fond d’un conteneur. Le nombre, la couleur, la vitesse et la réaction à la souris se règlent.