5 animations SVG pour animer votre conception Web

Les animations peuvent rendre un site Web fluide et fluide, mais comment pouvez-vous intégrer cette fonctionnalité dans votre propre travail? Rejoignez-nous et apprenez à animer votre conception Web avec ces exemples d'animation SVG créatifs.

Travailler avec des graphiques vectoriels évolutifs

SVG est un format de fichier qui utilise des lignes plutôt que des pixels pour stocker et afficher des images. Comme leur nom l'indique, les graphiques vectoriels évolutifs peuvent évoluer sans perte de qualité.

En plus d'être idéal pour le redimensionnement, vous pouvez également utiliser du code SVG dans HTML, et il agira comme n'importe quel autre élément. Cela signifie que vous pouvez utiliser Règles CSS, Code Javascript, et, plus important encore, des animations avec les SVG de votre site Web.

Vous pouvez créer des SVG à l'aide de logiciels comme Adobe Illustrator et de sites Web comme SVGator, mais vous pouvez également les créer à la main. Le format SVG est un langage XML en texte brut et ressemble un peu à HTML.

Cet exemple comporte quatre boutons avec leurs propres icônes et un arrière-plan de couleur bloc. Lorsque vous sélectionnez un bouton, il passe d'un cercle à un rectangle arrondi, tout en changeant la couleur d'arrière-plan de la page pour correspondre au bouton.

Un mélange de JS et de CSS produit ces résultats, et tout commence par une boucle qui ajoute des écouteurs d'événement à chaque bouton.

pour (var je = 0; i < menuItems.longueur; je++) {
 menuItems[i].addEventListener('Cliquez sur', boutonClic);
}

Une fois qu'un bouton est cliqué, une fonction appelée buttonClick() effectue plusieurs actions. Cela commence par changer la couleur de fond de la page :

document.body.style.backgroundColor = `#${cette.getAttribute('data-background')}`;

Après cela, il ajoute une classe CSS au bouton qui a été pressé, déclenchant une animation et changeant la couleur d'arrière-plan du bouton.

menuItemActive.classList.remove('menu__item--actif');
this.classList.add('menu__item--actif');
menuItemActive.classList.add('menu__item--animer');
this.classList.add('menu__item--animer');
menuItemActive = cette;

Bien que simple, cet exemple d'animation SVG offre un moyen unique de rendre votre site Web plus attrayant. Ce type de fonctionnalité de conception est parfait pour les sites Web mobiles et les applications HTML.

Vous pouvez ajouter autant de nœuds que vous le souhaitez à un chemin SVG, ce qui les rend idéaux pour créer du texte. Cette animation de trait simple illustre parfaitement la technique, le texte apparaissant de gauche à droite comme s'il était écrit.

L'animation n'a pas d'images clés, elle applique simplement une nouvelle largeur de trait à côté de la propriété de transition CSS. Cela permet à chaque ligne de se dessiner sur l'écran sans animation compliquée.

.chemin-1 {
 course-dasharray: 1850 2000 ;
 trait-dashoffset: 1851 ;
 transition: 5s linéaire ;
}

Une fonction JS ajoute une classe CSS unique à chaque section du texte en utilisant une seule classe CSS parente pour réduire davantage la densité du code.

$(une fonction() {
une fonctionanimationDémarrer() {
 $('#récipient').addClass('ailette');
 }
setTimeout (animationStart, 250);
});

En tant qu'exemple CSS uniquement, cette animation SVG est idéale pour tous ceux qui ne veulent pas plonger leurs orteils dans le code JavaScript. L'idée est simple: un bouton commence par un soulignement qui se transforme en une bordure complète lorsque vous le survolez.

Les images clés CSS créent deux états pour le bouton. Le premier état a un trait plus épais et ne couvre que le bas du bouton de forme SVG, en commençant à 0 %. L'autre état est le bouton complet à 100% avec un trait plus fin.

@images clés dessiner {
 0% {
 trait-dasharray: 140 540 ;
 trait-dashoffset: -474 ;
 largeur de trait: 8 px ;
 }
100% {
 course-dasharray: 760 ;
 trait-dashoffset: 0 ;
 largeur de trait: 2 px ;
 }
}

Ces images clés ne sont appliquées au contour du bouton de forme SVG que lorsque l'utilisateur déplace le curseur sur le bouton. Il utilise le :hover Pseudo-classe CSS pour ce faire, déclencher une règle qui ajoute les images clés de l'animation au bouton.

.svg-wrapper:flotter.façonner {
-webkit-animation: 0.5sdessinerlinéairevers l'avant;
animation: 0.5sdessinerlinéairevers l'avant;
}

Cela montre comment vous pouvez créer de belles animations sans utiliser de code complexe. Vous pouvez utiliser ces fondamentaux et votre créativité pour créer des éléments interactifs plus élaborés pour votre propre site Web.

Avec autant de techniques intéressantes sous le capot, il est difficile de décider de quoi discuter en regardant cet exemple d'horloge SVG.

Pour commencer, il utilise la fonction Date() pour collecter la date et l'heure actuelles. À l'aide de cette valeur, les fonctions getHours(), getMinutes() et getSeconds() divisent les données en leurs parties pertinentes. Le code calcule alors la position de chaque aiguille sur l'horloge.

var rendez-vous = NouveauDate();
var heuresAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

En stockant chacune des mains dans un tableau, leurs positions peuvent être définies très facilement à chaque exécution du code.

mains[0].setAttribute('depuis', shifter (secAngle));
mains[0].setAttribute('pour', décalage (secAngle + 360));
mains[1].setAttribute('depuis', décalage (minuteAngle));
mains[1].setAttribute('pour', décalage (minuteAngle + 360));
mains[2].setAttribute('depuis', shifter (heuresAngle));
mains[2].setAttribute('pour', shifter (heuresAngle + 360));

Le temps a des applications limitées dans le domaine de la conception Web, mais il est utile pour les comptes à rebours, les horloges et le stockage des horodatages. Cet exemple offre également un aperçu de la création d'animations SVG dynamiques avec des variables.

Cette animation SVG basée sur CSS offre un moyen astucieux de rendre n'importe quel formulaire incroyable.

Si rien n'est sélectionné, le formulaire comporte des lignes grisées sous chaque champ. Une ligne apparaît lorsqu'un champ est sélectionné, glissant depuis la gauche avec une animation fluide. Si l'utilisateur sélectionne un champ différent, la ligne glisse vers sa nouvelle position dans un mouvement fluide.

Enfin, une fois que l'utilisateur appuie sur la touche Connexion bouton, la ligne se transforme en un cercle qui vibre au chargement de la page.

Cet exemple SVG est particulièrement impressionnant car il s'appuie uniquement sur CSS pour produire un résultat aussi complexe. Il utilise des variables CSS pour stocker des données, ce qui facilite le contrôle d'éléments tels que l'application principale.

$app-padding: 6vh ;
$app-width: 50vh ;
$app-height: 90vh ;
#application {
 largeur: $app-width ;
 hauteur: $app-height ;
 remplissage: $app-padding ;
 fond: blanc ;
 boîte ombre: 002rem RVB(le noir, 0.1);
}

Vous pouvez utiliser cet exemple sur à peu près n'importe quel formulaire Web et engager vos utilisateurs comme jamais auparavant.

Créer vos propres animations SVG avec HTML, JS et CSS

La création d'une animation SVG à partir de zéro peut être un processus difficile lorsque vous vous lancez pour la première fois. Ces exemples vous donneront l'avance dont vous avez besoin pour créer des animations SVG qui feront briller votre site Web.

9 astuces CSS avancées pour la requête multimédia que vous devriez connaître

Lire la suite

A propos de l'auteur