Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces

Utilitaires CSS/JS & Responsive

Utilitaires, container queries, responsive shapes et bordures animées.

Quels sont les utilitaires indispensables pour un site web moderne ? Chaque projet web necessite un ensemble de fonctions recurrentes qui ne meritent pas d'etre recodees a chaque fois. Ces 40 snippets CSS et JavaScript couvrent les besoins les plus frequents : smooth scroll, copy to clipboard, dark mode toggle, responsive helpers, animation utilities et bien plus. Des micro-outils fiables, prets a integrer en quelques secondes.

Ajoutez un dark mode toggle a votre site en une seule integration, un smooth scroll pour une navigation fluide entre vos sections, ou un copy to clipboard sur vos blocs de code. Les responsive helpers simplifient la gestion des breakpoints, tandis que les animation utilities vous donnent un controle precis sur le declenchement et le timing de vos effets visuels.

Chaque snippet est autonome, sans dependance, et documente pour une prise en main immediate. Le code respecte les standards modernes et les bonnes pratiques de performance. Avec Effect.Labs, vous constituez votre boite a outils front-end en quelques clics au lieu de fouiller dans des dizaines de tutoriels eparpilles sur le web.

Faites defiler ce contenu pour voir la barre de progression en action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Scroll Progress Bar

Indicateur de progression de lecture avec gradient anime en haut du contenu.

JS Scroll Progress
Hover pour simuler le scroll

Back to Top Button

Bouton anime qui apparait au scroll avec effet de rebond.

CSS Animation Scroll
☀ ☾

Theme Toggle

Interrupteur de theme avec animation fluide soleil/lune.

CSS Toggle Transition
12
12
Heures
:
34
34
Minutes
:
56
56
Secondes

Countdown Timer

Compte a rebours style flip-clock avec animation de retournement.

JS Animation Timer

Copy to Clipboard

Bouton de copie avec confirmation animee et feedback visuel.

JS Click Feedback

Share Buttons

Boutons de partage social avec effets de survol et tooltips.

CSS Hover Social
★ ★ ★ ★ ★
Cliquez pour noter

Rating Stars

Systeme de notation avec etoiles animees et effet de remplissage.

JS Interactive Rating

Like / Heart Button

Bouton coeur avec animation de battement et explosion de particules.

JS Click Particles
Sauvegarder

Bookmark Toggle

Icone de signet avec animation de sauvegarde elastique.

CSS Toggle Animation
🔔 3

Notification Badge

Badge de notification avec animations pulse, bounce et shake.

JS Animation Badge

Carte Adaptive

Le layout passe de colonne à rangée selon la largeur du conteneur.

@container CSS

Adaptive Card

Carte qui passe d'un layout vertical à horizontal via @container query quand le conteneur dépasse 280px.

CSS @container Layout
Accueil
Recherche
Profil

Responsive Nav

Navigation qui affiche seulement les icônes en petit, puis ajoute les labels quand le conteneur s'élargit.

CSS @container Nav

Titre adaptatif

Le texte s'adapte à la taille du conteneur grâce aux container queries. Trois paliers de taille.

Fluid Typography

Tailles de texte qui s'adaptent en 3 paliers via @container à 260px et 320px. Bouton inclus.

CSS @container Typography

Analytics

+8.2%
1.2kVues
84Clics
3.1%CTR
12sDurée

Dashboard Widget

Widget analytics avec stats en grille adaptative (1→2→4 colonnes) et graphique qui apparaît à 300px.

CSS @container Dashboard

Premium Pack

49 €

Accès à tous les effets et templates premium.

Product Card

Carte produit e-commerce qui passe en layout horizontal et révèle la description et le bouton secondaire.

CSS @container E-commerce
2.4kUtilisateurs
+12%
186Favoris
+8%
4.2mDurée moy.
-3%
9.8k€Revenus
+21%

Stats Panel

Panneau de statistiques passant de 1 à 2 colonnes avec indicateurs de tendance qui apparaissent.

CSS @container Stats
3:42

Container Queries 101

12k vues · 2 jours

Apprenez à créer des composants vraiment responsifs avec @container.

Media Card

Carte vidéo qui passe en mode horizontal avec description étendue quand le conteneur dépasse 280px.

CSS @container Media
Accueil
Projets
Réglages

Sidebar Toggle

Sidebar qui affiche les labels via @container quand elle s'étend. Le contenu principal s'adapte aussi.

CSS @container Sidebar

Form Adapt

Formulaire dont les champs passent d'empilés à côte-à-côte quand le conteneur dépasse 280px.

CSS @container Form
1 · span 2
2
3
4
5
6

Grid Morph

Grille qui passe de 1 à 2 puis 3 colonnes avec la première cellule qui prend 2 colonnes au palier max.

CSS @container Grid
⚖
Adaptive Card

Ce contenu apparait et la mise en page change selon la largeur du conteneur.

Glissez pour redimensionner le conteneur

Container Query Cards

La carte change de layout (vertical, horizontal, minimal) selon la largeur du conteneur avec @container queries.

CSS @container Layout

Shape Hero

Le clip-path change selon la taille

Glissez pour redimensionner le conteneur

Shape-Responsive Hero

Le clip-path du hero passe de diagonal a courbe puis hexagonal selon la largeur du conteneur.

CSS clip-path @container
Home About Blog Contact
Home About Blog Contact
Page content area
Glissez pour redimensionner le conteneur

Adaptive Navigation

La navigation se transforme : hamburger, tabs inline, puis sidebar selon la taille du conteneur.

CSS @container Navigation
A
B
C
D
E
F
Glissez pour redimensionner le conteneur

Fluid Grid Morph

Les items de la grille passent smoothly de 1 a 2 puis 3 colonnes au redimensionnement avec transitions CSS.

CSS Grid @container

Typography Adapts

La taille, le poids et l'espacement du texte s'ajustent dynamiquement selon les dimensions du conteneur grace aux container queries.

Glissez pour redimensionner le conteneur

Container Query Typography

La typographie adapte sa taille, son poids et son espacement selon les dimensions du conteneur via @container.

CSS @container Typography
Morphing Product

Image, texte et boutons se reorganisent physiquement aux breakpoints du conteneur.

Glissez pour redimensionner le conteneur

Breakpoint Morphing Cards

Les elements de la carte (image, texte, boutons) se reorganisent physiquement aux breakpoints du conteneur.

CSS @container Morph
Revenue Mensuel
Jan12k
Fev16k
Mar14k
Avr21k
Mai18k
Juin24k
Juil20k
Aout25k
Glissez pour redimensionner le conteneur

Responsive Chart

Le graphique passe d'une sparkline simple a un bar chart detaille avec labels selon l'espace disponible.

CSS @container Data Viz
Accueil
Recherche
Profil
Paramètres
Contenu principal
Glissez pour redimensionner le conteneur

Sidebar Collapse

La sidebar passe de icones seules a une navigation complete avec labels selon la largeur du conteneur.

CSS @container Sidebar
Starter
9€/mois
  • 5 projets
  • 10 Go stockage
  • Support email
Pro
29€/mois
  • Projets illimites
  • 100 Go stockage
  • Support prioritaire
Enterprise
99€/mois
  • Tout illimite
  • 1 To stockage
  • Support 24/7
Glissez pour redimensionner le conteneur

Responsive Pricing Table

Les cartes de pricing passent d'un empilement vertical a cote a cote avec transitions animees.

CSS @container Pricing
Dynamic Ratio 1:1
Glissez pour redimensionner le conteneur

Dynamic Aspect Ratio

Le conteneur media change d'aspect ratio (1:1, 4:3, 16:9, 21:9) selon la largeur via @container.

CSS @container Aspect Ratio
Gradient Spin

Gradient Border Spin

Bordure en conic-gradient tournant utilisant @property pour animer l'angle. L'effet viral du spinning border.

CSS @property Gradient
Dashed March

Dashed Border March

Bordure en pointillés dont les tirets défilent en continu via stroke-dashoffset animé.

SVG Animation Dash
Neon Pulse

Neon Border Pulse

Bordure néon qui pulse avec une lueur alternant d'intensité via box-shadow animé.

CSS Neon Glow
Draw-On

Border Draw-On

La bordure se dessine depuis un coin et trace tout le périmètre avec 4 pseudo-éléments animés séquentiellement.

CSS Hover Sequential
Double Line

Double Line Border

Deux bordures concentriques animées tournant en sens opposés avec des couleurs distinctes.

CSS @property Multi-layer
Lightning

Lightning Border

Effet électrique/foudre utilisant un filtre SVG feTurbulence avec seed animé pour un rendu organique.

SVG Filter Electric
Gradient Morph

Gradient Border Morph

Bordure en dégradé qui mute fluidement vers un nouveau jeu de couleurs au hover.

CSS Hover Gradient
Corner Accent

Corner Accent Borders

Seuls les coins sont bordés, avec des accents colorés qui s'allongent au survol.

CSS Hover Corners
Click Me

Border Ripple

Au clic, une impulsion lumineuse parcourt le périmètre de la bordure avec des ondes qui se propagent.

JS Click Ripple
Constellation

Dotted Constellation Border

Points le long de la bordure reliés par des lignes animées formant une constellation au survol.

SVG JS Interactive

Questions frequentes

Comment activer le smooth scroll en CSS ? +

Ajoutez html { scroll-behavior: smooth } a votre CSS. Tous les liens ancres (#section) animeront le scroll automatiquement. Pour un controle plus fin, utilisez element.scrollIntoView({ behavior: 'smooth' }) en JavaScript.

Comment copier du texte dans le presse-papier en JavaScript ? +

Utilisez navigator.clipboard.writeText(text). C'est l'API moderne, asynchrone et sécurisée. Fonctionne uniquement en HTTPS. En fallback, creez un textarea temporaire, selectionnez son contenu, et executez document.execCommand('copy').

Comment creer un dark mode toggle ? +

Ajoutez une classe (theme-light) sur body qui inverse les couleurs via CSS custom properties. Sauvegardez la preference dans localStorage. Au chargement, lisez localStorage et appliquez la classe avant le rendu pour eviter le flash.

Comment detecter si un element est visible a l'ecran ? +

Utilisez IntersectionObserver. Creez un observer avec le threshold souhaite (0.1 = 10% visible, 1 = 100%). Observez l'element. Le callback est appele quand la visibilite change. Plus performant qu'un listener scroll.

Comment debouncer une fonction en JavaScript ? +

Creez une fonction wrapper qui annule le timer precedent et en cree un nouveau : function debounce(fn, delay) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); }; }. Utilisez pour search, resize, scroll.

Categories similaires

🧭

Navigation & UI

36 effets

 📊

Data & Visualisation

28 effets

 📝

Formulaires

20 effets