25 exemples d'animation CSS sympas à recréer

Page 2 sur 2: Effets d'animation CSS

13. Texte de glitch

Les effets Glitchy sont idéaux pour donner à un site Web un aspect anarchique ou en détresse. Vous pouvez utiliser des images clés CSS pour créer ce type d'animation. Le processus est similaire à l'utilisation d'un logiciel d'animation, sauf que les images clés en CSS sont écrites sous forme de pourcentages pour la chronologie de l'animation dans le code. Dans ce didacticiel de texte glitch , le designer et développeur Mark Shufflebottom parcourt le processus. Vous utiliserez également Grille CSS pour positionner des éléments sur l'écran.

14. Hors des sentiers battus

  • Auteur: Adam Kuhn

Les propriétés liées au SVG deviennent de plus en plus utilisables dans CSS. Deux des propriétés animables les plus uniques incluent les chemins: offset-path et clip-path . Par exemple, en utilisant offset-path nous pouvons définir (et même dessiner à la main) un chemin SVG et ajuster notre décalage-distance (ou dans le cas des navigateurs hérités, décalage de mouvement ) pour permettre à nos éléments de se déplacer sur notre chemin défini.

Ci-dessous, nous allons définir un chemin SVG et dire à notre élément de se déplacer du début à la fin.

animation:followPath 5s ease-in-out infinite; offset-path: path('M 40 0 C 75 170 160 140 200 280 Q 220 400 340 400 Q 420 380 480 540'); motion-path: path(“M 40 0 C 75 170 160 140 200 280 Q 220 400 340 400 Q 420 380 480 540”); @keyframes followPath{ from{ offset-distance:0%; motion-offset:0%;} to{ offset-distance:100%; motion-offset:100%;}}

Gardez à l'esprit que lorsque vous dessinez votre chemin, il s'intégrera dans la zone de visualisation du SVG, toutes les valeurs numériques étant traduites en pixels. Cela peut poser des défis réactifs car offset-path les animations n'acceptent pas les unités relatives.

L'autre propriété de chemin animable vraiment intéressante est clip-path. Ce qui est génial dans l’animation de chemin de clip, c’est la possibilité de faire une transition en douceur du positionnement des points de chemin. Par exemple, nous pouvons faire la transition clip-path: polygone (0 0, 100% 0, 100% 100%, 0% 100%) à clip-path: polygone (50% 0%, 50% 0%, 100% 100%, 0% 100%); et transformez en douceur un carré en triangle - un exploit autrement presque impossible avec CSS.

Remarque importante sur l'animation clip-path : le nombre de points sur le tracé doit rester égal pour les formes de début et de fin. Pour un moyen facile de visualiser comment le chemin du clip animera l'extraction Clippy de Bennett Feely .

Découvrez cet exemple de chemin de décalage Ghibli Slider:

Et clip-path exemple First Light:

15. Chutes de neige

La neige est créée à l'aide d'un SVG et la technique est très similaire à la façon dont nous avons créé les bulles plus tôt. Pour commencer, nous créons deux couches de cercles à l'intérieur d'un SVG, puis nous animons ces deux couches en traduisant la valeur Y avec une animation d'image clé.

Nous appliquons l'animation à chaque calque au lieu d'éléments individuels et réutilisons la même animation pour les deux calques. En leur donnant simplement des durées différentes, nous pouvons ajouter de la profondeur à notre scène.

16. Arrière-plan mobile

Le site Web A Violent Act utilise des masques et des mouvements subtils pour attirer l'attention de l'utilisateur. La majorité du travail ici est dans la configuration et la création du SVG.

17. Transitions colorées

Le site Web DaInk utilise une technique vraiment efficace pour effectuer la transition entre les pages. La transition est simple et consiste en un SVG contenant un certain nombre de rectangles de différentes tailles de couleurs différentes positionnés les uns sur les autres.

L'animation consiste à transformer la position X par la largeur du SVG. Ensuite, en utilisant nième de type , nous appliquons des délais, en décalant chacun de 75 ms par rapport au dernier pour créer une transition en douceur.

18. Lettres apparaissant au hasard

Jam3 a utilisé JavaScript et CSS pour créer une superposition de contenu animé pour un arrière-plan vidéo en plein écran sur son site Nuclear Dissent.

Pour copier cette animation CSS, la première étape est d'initier la structure du document HTML. Il s'agit du conteneur de documents qui stocke les sections de tête et de corps. Alors que la section head est utilisée pour charger les ressources CSS et JavaScript externes, le corps contiendra le contenu de la page visible créé à l'étape suivante.

Le contenu de la page de premier plan est placé à l'intérieur du principale conteneur pour offrir l'avantage d'un contrôle facile du flux de contenu. L'élément de texte a le recouvrir classe appliquée afin qu'elle puisse être référencée par JavaScript et CSS pour appliquer l'animation de texte. L'animation peut être appliquée à plusieurs éléments à l'aide de la recouvrir classer.

This is a story all about how...

La dernière partie du HTML consiste à définir l'élément vidéo d'arrière-plan. Tous les navigateurs ne sont pas capables de prendre en charge chaque norme vidéo, d'où la nécessité de spécifier différentes sources. Le navigateur affichera la première source qu'il est capable de prendre en charge. Notez comment l'élément vidéo a le lecture automatique , en sourdine et boucle attributs appliqués pour qu'il soit automatiquement lu et répété sans son.

Créez un nouveau fichier appelé styles.css . La première étape de ce fichier consiste à définir les propriétés du principale conteneur de contenu. Les paramètres par défaut de police et de couleur sont appliqués au contenu enfant à hériter. Les valeurs automatiques sont appliquées aux marges latérales afin que le contenu enfant soit aligné au centre.

main { font-family: Helvetica, sans-serif; color: #fff; padding: 2em; width: 75%; min-height: 100vh; margin: 0 auto 0 auto; }

L'élément d'arrière-plan nécessite un style spécifique pour que l'effet fonctionne. Tout d'abord, un positionnement fixe est important pour garantir qu'il reste dans la même position si l'utilisateur fait défiler la page. Deuxièmement, il doit utiliser un négatif index z qui garantira sa position sous le contenu de la page principale. Transformer et Taille sont également utilisés pour définir la taille et l'emplacement de l'élément pour couvrir la fenêtre pleine page.

video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: -9999; transform: translateX(-50%) translateY(-50%); background: #000; }

Le recouvrir L'élément sera manipulé par JavaScript pour diviser chaque lettre de son contenu textuel pour être enveloppée par une balise span. Cela permet aux lettres individuelles d'être animées via CSS. Premièrement, les paramètres par défaut du portée les lettres sont définies pour avoir un positionnement relatif, une opacité invisible et une animateOverlay animation. Deuxièmement, un retard à leur animation est appliqué en fonction de leur positionnement enfant.

.overlay span{ position: relative; opacity: 0; top: 1em; animation: animateOverlay 1s ease-in- out forwards; } .overlay span:nth-child(4n) { animation-delay: 0s; } .overlay span:nth-child(4n+1) { animation- delay: 1s; } .overlay span:nth-child(4n+3) { animation- delay: 2s; } .overlay span:nth-child(4n+2) { animation- delay: 3s; }

L'animation appliquée à chaque élément span se compose d'une seule image vers laquelle les éléments vont s'animer. Cela définit leur opacité pour devenir entièrement visible, ainsi que leur positionnement vertical pour s'animer vers leur position de flux de texte par défaut. Notez comment l'étape 6 définit chaque élément de travée pour qu'il soit abaissé de 1em.

@keyframes animateOverlay { to { opacity: 1; top: 0; } }

Créez un nouveau fichier appelé code.js . Cette première étape recherchera tous les éléments en utilisant le recouvrir classe - dont un pour loop est utilisé pour appliquer le code plus tard. Ces éléments ne sont disponibles qu'après le chargement de la page, ils doivent donc être placés dans un écouteur d'événements dans la fenêtre du navigateur qui est déclenché à la fin de son chargement.

indow.addEventListener('load', function(){ var nodes = document. querySelectorAll('.overlay'); for(var i=0; i

Chaque élément trouvé ici doit avoir son contenu HTML redéfini afin que chaque lettre soit à l'intérieur d'un élément span. Ceci est réalisé en lisant son texte brut en utilisant innerText , puis en utilisant une seconde pour boucle pour ajouter individuellement chaque lettre à la nouvelle version du HTML - complète dans sa balise span. Après la lecture de chaque lettre, le nœud parent innerHTML est mis à jour avec le nouveau HTML.

var words = nodes[i].innerText; var html = ''; for(var i2=0; i2' } nodes[i].innerHTML = html;

19. Cercles pulsants

L'animation pulsée utilisée sur le site Web Peek-a-Beat est simple mais efficace et pas difficile à reproduire. Il se compose de trois cercles à l'intérieur d'un SVG - nous animons simplement leur échelle et leur opacité.

20. Élargissement du temps fort

C'est une technique très simple mais vraiment efficace. La transition est effectuée à l'aide du ::avant que pseudo élément. Pour commencer, le pseudo élément est placé en bas tout en couvrant toute la largeur, mais seulement quelques pixels en hauteur.

Lorsque l’élément est interagi avec, la largeur et la hauteur du pseudo-élément sont toutes deux transposées à 105% de la taille du parent (le changement est beaucoup plus spectaculaire verticalement), ainsi que la transition de la couleur du texte.

21. Titre élevé

Ensemble Correspondances utilise une animation simple pour transmettre le mouvement dans la musique. Le design représente vaguement des partitions.

22. Icône du menu rotatif

Le bouton de menu animé est créé à l'aide d'un SVG. L'animation se produit lorsque l'utilisateur interagit avec le bouton de menu. Deux transitions ont lieu: le groupe circulaire autour du menu tourne à 360 degrés et l'icône de menu au centre change de couleur.

La partie la plus compliquée est la fonction de synchronisation. Utilisant cubique-bezier pour obtenir un contrôle complet, nous pouvons démarrer l’animation lentement, parcourir la partie centrale et la ralentir à nouveau à la fin.

23. Souligné depuis le centre

Animations CSS: souligner à partir du centre

Cliquez pour voir l'animation en action

L'animation consiste à positionner le ::après pseudo élément vers le bas, puis le redimensionner lorsque le bouton interagit avec.

24. Coins en expansion

Le site Web de l'Auditorium Princess Alexandra a une manière visuelle de montrer les catégories de ses spectacles. Chacune des cartes de spectacle a un coin triangulaire défini dans une couleur qui représente la catégorie, puis, au survol, le nom de la catégorie est affiché.

L'effet est obtenu en utilisant le ::avant que et ::après pseudo éléments, transition de la taille du triangle et atténuation du nom lorsque l'élément interagit avec.

25. Flèche coulissante

La bibliothèque de Greenwich a une transition vraiment intéressante sur ses boutons. Lorsque vous interagissez avec le bouton, deux choses se produisent: la partie texte du bouton est recouverte et la flèche est ensuite animée sur le côté droit du bouton et de nouveau depuis la gauche.

La transition de couleur est réalisée avec la propriété transition et la flèche à l'aide d'une simple animation d'image clé. La transition et l'animation utilisent la même durée pour synchroniser les mouvements.

Lire la suite:

  • 1
  • deux

Page actuelle: Effets d'animation CSS

Page précédente Tutoriels d'animation CSS