Catégories
Astuces et Design

Animation avec Lottie | Astuces CSS

Je pense que l'animation sur le Web est non seulement amusante, mais aussi engageante de telle sorte qu'elle a converti le site visiteurs dans les clients. Pensez au bouton «J'aime» sur Twitter. Lorsque vous «aimez» un tweet, de minuscules bulles colorées se répandent autour du bouton en forme de cœur alors qu'il semble se transformer […]

Catégories
Astuces et Design

Animation des compteurs de nombres | Astuces CSS

Animation numérique, comme dans, imaginez un nombre passant de 1 à 2, puis de 2 à 3, puis de 3 à 4, etc. pendant un temps spécifié. Comme un compteur, sauf contrôlé par le même type d'animation que nous utilisons pour d'autres animations de conception sur le Web. Cela pourrait être utile lors de la […]

Catégories
Astuces et Design

Animation Web accessible: le WCAG sur l'animation expliqué

C’est vrai, l’animation Web peut être accessible! Parfois, il faut juste un petit effort supplémentaire pour s'assurer que c'est le cas. Il y a des choses stratégiques que nous pouvons faire pour nous assurer que nos animations ont un impact positif sur l'accessibilité, comme planifier la façon dont elles contribuent à l'expérience utilisateur globale et […]

Catégories
Astuces et Design

Animation de composants React avec GreenSock – Smashing Magazine

A propos de l'auteur Blessing Krofegha est un ingénieur logiciel basé à Lagos au Nigeria, avec un désir ardent de contribuer à rendre le Web génial pour tous, en écrivant et en construisant… Plus à propos Bénédiction … GreenSock Animation Platform (GSAP) est un ensemble de fonctions JavaScript qui vous permettent d'interpeller une valeur / […]

Catégories
Astuces et Design

Comment obtenir une animation d'écriture avec des traits SVG irréguliers

Je voulais faire une animation d'écriture manuscrite pour les polices de calligraphie – le genre où les mots s'animent comme s'ils étaient écrits par un stylo invisible. Parce que les polices de calligraphie ont des largeurs de trait inégales (elles ne sont même pas des traits en termes de SVG), il était presque impossible de […]

Catégories
Astuces et Design

Menu Révéler par animation de rotation de page

Il existe de nombreuses approches différentes des menus sur les sites Web. Certains menus sont persistants, toujours visibles et affichent toutes les options. D'autres menus sont masqués par conception et doivent être ouverts pour afficher les options. Et il existe même des approches supplémentaires sur la façon dont les menus masqués révèlent leurs éléments de […]

Catégories
Astuces et Design

Animation Web GreenSock 3: découvrez les nouvelles fonctionnalités de GSAP

Le 1er novembre 2019, GreenSock Animation Platform (GSAP) a publié la version 3, qui est sa mise à niveau la plus importante à ce jour. GSAP est une bibliothèque d'animation JavaScript puissante, rétrocompatible, performante et mature qui vous permet d'animer à peu près tout sur le Web – comme des éléments DOM, des objets JS, […]

Catégories
Astuces et Design

Masquer les barres de défilement pendant une animation

CSS ne peut toujours pas animer auto dimensions. .dropdown { transition: 0.2s; height: 0; } .dropdown.open { /* the height will change, but it won’t animate. */ height: auto; } Il existe une astuce JavaScript que vous pouvez essayer. Brandon Smith a décrit plusieurs techniques ici il y a quelque temps. Mon esprit va toujours […]

Catégories
Astuces et Design

Tendance de conception: formes et motifs géographiques (avec animation)

La géométrie élégante est une tendance de conception qui revient sans cesse. Cette fois, la nouvelle tournure est que les formes et les éléments de conception incluent des touches d'animation pour donner vie aux formes et aux motifs. Il est plus facile que jamais de mettre en œuvre une animation sur le Web, de manière […]

Catégories
Astuces et Design

Animation CSS pure d'extrait de blog sur Hover

Dans ce didacticiel, nous allons créer cette animation amusante pour révéler l'extrait de l'article de blog en survol en utilisant du CSS pur et sans JavaScript. Le GIF ci-dessous montre ce que vous pourrez créer d'ici la fin de cela. Vous devez avoir des connaissances de base en HTML et CSS pour suivre le tutoriel. […]

Catégories
Astuces et Design

Comment créer une animation de piste de particules en JavaScript – Smashing Magazine

A propos de l'auteur Anna Prenzel a étudié l'informatique à l'Université des sciences appliquées de Zittau / Görlitz et a obtenu son doctorat au BTU Cottbus-Senftenberg. Elle est … Plus à propos Anna … Les animations de particules font partie des animations les plus impressionnantes qui existent. Dans cet article, Anna Prenzel vous expliquera comment […]