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 ✨ Passer Premium

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

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

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

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

Bookmark Toggle

Icone de signet avec animation de sauvegarde elastique.

CSS Toggle Animation

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

Responsive Nav

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

CSS @container Nav

Fluid Typography

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

CSS @container Typography

Dashboard Widget

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

CSS @container Dashboard

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

Stats Panel

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

CSS @container Stats

Media Card

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

CSS @container Media

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

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

Container Query Cards

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

CSS @container Layout

Shape-Responsive Hero

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

CSS clip-path @container

Adaptive Navigation

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

CSS @container Navigation

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

Container Query Typography

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

CSS @container Typography

Breakpoint Morphing Cards

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

CSS @container Morph

Responsive Chart

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

CSS @container Data Viz

Sidebar Collapse

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

CSS @container Sidebar

Responsive Pricing Table

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

CSS @container Pricing

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 Border March

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

SVG Animation Dash

Neon Border Pulse

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

CSS Neon Glow

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 Border

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

CSS @property Multi-layer

Lightning Border

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

SVG Filter Electric

Gradient Border Morph

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

CSS Hover Gradient

Corner Accent Borders

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

CSS Hover Corners

Border Ripple

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

JS Click Ripple

Dotted Constellation Border

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

SVG JS Interactive

CSS Anchor Tooltip Pro

Tooltips ancrés nativement à n'importe quel élément avec anchor-name / position-anchor, avec auto-flip. Affichage 100% CSS via :has(). Fallback absolute automatique.

Anchor PositioningCSS modernePremium

Flash Sale Countdown

Compte à rebours flip-clock avec barre d'urgence qui se vide, pensé pour les ventes flash. Durée et libellés personnalisables ; se branche sur une vraie date de fin.

💡 Idéal pour : vente flash, Black Friday, lancement, offre limitée, bannière promo, pop-up d'urgence.

Vanilla JS Flip-clock Urgence Premium

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