Underline Expand

Ligne qui s'étend depuis le centre.

CSS Center

Underline Slide

Ligne qui glisse de droite à gauche.

CSS Slide

Background Fill

Fond qui se remplit au survol.

CSS Fill

Bracket Hover

Crochets qui apparaissent au survol.

CSS Text

Cliquez pour animer

Hamburger Menu

Animation hamburger vers croix.

CSS Toggle
Home About Work

Pill Indicator

Indicateur animé qui suit la sélection.

JS Tab

Dropdown Reveal

Menu déroulant avec animation fade/slide.

CSS Dropdown

Cliquez pour animer

Morphing Hamburger

Icone hamburger qui se transforme en X avec animation fluide.

CSS Morph
Dashboard Analytics Settings

Tab Slider

Onglets avec indicateur glissant qui suit l'onglet actif.

JS Slider

Breadcrumb Animated

Fil d'Ariane anime avec chevrons interactifs.

CSS Breadcrumb

Scrollez pour voir l'effet sticky header avec détection d'intersection.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.

Sticky Header Detection

Header sticky avec Intersection Observer qui détecte le scroll et change de style.

JS Sticky Observer

Custom Bezier Transition

Transition de couleur avec courbe cubic-bezier personnalisée pour un mouvement fluide.

CSS Bezier Smooth
Overview Features Pricing

Floating Indicator

Indicateur flottant avec transition cubic-bezier fluide. Inspiré de CTA Gallery.

JS Nav Smooth

Survolez pour révéler

Dashboard Analytics Settings Logout

Stagger Menu Reveal

Menu avec animation staggered - chaque item apparaît avec un délai progressif.

CSS Stagger Reveal
Contenu de la premiere section avec animation de hauteur fluide.
Deuxieme section avec du contenu different.
Troisieme et derniere section.

Accordion Basic

Sections extensibles avec animation de hauteur fluide. Plusieurs sections peuvent etre ouvertes.

CSS JS Interactive
Une seule section peut etre ouverte a la fois.
Ouvrir cette section ferme les autres.
Parfait pour les FAQ et menus.

Accordion Single

Une seule section ouverte a la fois. Les autres se ferment automatiquement.

CSS JS Exclusive
Bienvenue sur la page d'accueil. L'indicateur glisse en douceur.
Votre profil utilisateur. Animation fluide entre les onglets.
Parametres de l'application. Transition elegante.

Tabs Animated

Onglets avec indicateur qui glisse entre les selections.

CSS JS Transition

Toast Success

Notification de succes verte avec animation de glissement. Disparait apres 3 secondes.

JS Animation Feedback

Toast Error

Notification d'erreur rouge pour alerter l'utilisateur. Auto-dismiss apres 3 secondes.

JS Animation Alert

Toast Stack

Plusieurs toasts s'empilent avec un espacement elegant.

JS Stack Queue

Skeleton Card

Placeholder de carte avec effet de scintillement pendant le chargement.

CSS Loading Shimmer

Skeleton Text

Placeholder de texte avec animation de chargement elegante.

CSS Loading Placeholder

Tooltip Fade

Infobulle qui apparait en fondu au survol.

CSS Hover Fade

Tooltip Arrow

Infobulle avec pointeur fleche et animation de levee.

CSS Hover Arrow

Modal Slide

Modal qui glisse depuis le bas de l'ecran avec overlay flou.

CSS JS Overlay

Dropdown Animated

Menu deroulant avec animation d'apparition en cascade.

CSS JS Stagger

Smart Tooltip System

Tooltips qui s'inversent automatiquement selon la position dans le viewport avec position-try-fallbacks.

CSS JS Anchor
A
B
C
D

Connected Nodes

Noeuds draggables connectés par des lignes SVG qui se mettent à jour en temps réel.

SVG JS Drag
Modifier
Favoris
Partager

Floating Action Labels

Labels flottants ancrés aux boutons d'action qui apparaissent au survol avec repositionnement au scroll.

CSS Hover Position

Popover Menu Chain

Menus popover chainés avec sous-menus positionnés relativement au parent via le Popover API pattern.

JS Popover Menu
Le positionnement CSS ancré permet de lier un élément Note : anchor-name en CSS à un autre dans le DOM. Cela remplace les calculs JavaScript manuels Note : getBoundingClientRect() par une solution déclarative avec fallbacks automatiques Note : position-try-fallbacks .

Annotation Layer

Annotations flottantes ancrées à des zones de contenu spécifiques avec empilage intelligent.

CSS Hover Annotation
👤 3 En ligne
👤 12 Occupé
👤 99+ Absent

Dynamic Badge Positioning

Badges de notification ancrés aux coins des avatars, s'adaptant au redimensionnement.

CSS Badge Responsive
Profil
Messages
Paramètres
Étape 1/3
Accédez à votre profil et personnalisez votre avatar.

Guided Tour Spotlight

Onboarding pas-à-pas avec spotlight ancré aux éléments UI et indicateur fléché.

JS Tour Anchor
🖱 Clic droit ici

Context Menu

Menu contextuel positionné au curseur avec logique d'inversion aux bords du viewport.

JS Click Position
L'ancrage CSS est une spécification récente 1 [1] CSS Anchor Positioning, W3C Working Draft, 2024. qui permet de positionner un élément relativement à un autre 2 [2] Utilise anchor-name et position-anchor en CSS natif. sans JavaScript. Le support navigateur est en progression 3 [3] Chrome 125+, Edge 125+. Firefox et Safari en cours. .

Footnote Popover

Notes de bas de page académiques apparaissant en popover près des marqueurs de référence.

CSS Hover Popover
72%
Lun
53%
Mar
91%
Mer
38%
Jeu
65%
Ven

Chart Data Labels

Labels de données ancrés aux points du graphique avec évitement automatique des chevauchements.

CSS Hover DataViz

Categories similaires