Share
La «Journée mondiale de la santé mentale» de l'Organisation mondiale de la santé est ici, le 10 octobre 2018, pour aider à sensibiliser sur les problèmes de santé mentale. Cette année, l’accent est mis sur le fait de nous encourager tous à soutenir et à participer aux programmes et services qui peuvent atteindre les jeunes, de manière idéale pour traiter efficacement les problèmes le plus tôt possible..
Pour marquer le jour où nous allons utiliser CSS pour animer un SVG centré sur le ruban vert que beaucoup de gens portent pour symboliser la sensibilisation à la santé mentale..
Nous aurons deux mains réunies des côtés gauche et droit de la scène pour nous serrer l'une contre l'autre, illustrant le soutien que les gens peuvent s'apporter mutuellement, après quoi le ruban vert apparaît avec un texte descriptif..
Lorsque vous avez terminé, vous aurez cette animation (appuyez sur REDIFFUSION si besoin):
J'ai préparé à l'avance le code SVG et HTML pour que vous puissiez vous concentrer sur l'utilisation de CSS pour animer divers éléments de l'illustration..
Pour commencer, créez un fichier HTML vide, puis copiez et collez le code présenté ci-dessous:
Journée mondiale de la santé mentale
Enregistrez et prévisualisez votre fichier dans un navigateur et vous devriez voir cette image, avec tous les éléments du SVG visibles, certains empilés les uns sur les autres:
Commençons par une ventilation de chaque élément inclus dans le SVG afin que vous sachiez avec quoi nous travaillons..
D'abord, nous avons la main avant qui va entrer du côté gauche du SVG:
Ensuite, nous avons la main arrière qui entrera de la droite:
Après que les deux mains ouvertes se soient croisées au centre de l'écran, nous les remplacerons par les mains jointes:
Nous avons ensuite le ruban vert de sensibilisation à la santé mentale qui va se fondre:
Le texte principal de la «Journée mondiale de la santé mentale» apparaîtra ensuite:
Et le texte de la date, qui sera l’ultime élément à intégrer:
Tout ce dont nous avons besoin pour notre animation est déjà dans le code SVG, nous avons juste besoin d’atteindre et de cibler les éléments qu’il contient via leurs identifiants.
La première chose à faire est de masquer tous les éléments afin de pouvoir ensuite les afficher au moment opportun. Ajoutez le code suivant entre les balises déjà présentes dans le fichier HTML que vous venez de créer.
#fronthand, #rearhand, #claspedhands, #ribbon, #wmhd, #date opacity: 0;
Nous allons utiliser @ keyframes animations pour chaque partie de notre séquence. La première animation que nous créerons est celle qui peut faire passer un élément d'une position située à l'extérieur du bord gauche du SVG à sa position d'origine au centre..
Ajoutez le code suivant à votre CSS.
@keyframes infromleft from transform: translate (-100%); opacité: 1; à transformer: traduire (0%); opacité: 1;
Passons en revue ce que nous faisons avec ce code.
Nous avons seulement besoin de déplacer notre élément d'une position à une autre, plutôt que de le zigzaguer entre des positions intérimaires. Pour cette raison, nous pouvons simplement utiliser de et à plutôt que d'avoir besoin de spécifier des images clés basées sur un pourcentage.
dans le de image clé, nous allons utiliser le transformer propriété à Traduire, c'est-à-dire repositionner, l'élément tout à gauche, une position exprimée par -100%. dans le à image clé, nous spécifions la position d'origine de l'élément avec 0%. L’animation par images clés gérera automatiquement le déplacement de l’élément entre de et à États.
Vous remarquerez également le opacité est réglé sur 1 dans les deux images clés. Cela signifie que l'élément apparaîtra au début de l'animation, restera visible jusqu'à la fin, puis reviendra à la valeur par défaut. opacité de 0 nous avons mis plus tôt et disparaissent une fois de plus. Il faut que cela se produise pour faire place à l’élément mains jointes qui apparaîtra par la suite..
Maintenant, nous pouvons appliquer l’animation à l’élément principal de notre SVG, qui utilise l’ID #fronthand. Ajoutez le CSS suivant à votre code.
#fronthand nom-animation: infromleft; animation-durée: 1.5s; animation-timing-function: sortie facile;
Ici, nous spécifions le nom de l'animation, c'est-à-dire. sous-marin, ce qui déclenchera l'animation que nous venons de créer. Dans la deuxième ligne, nous disons à l'animation de se dérouler sur une période de 1,5 seconde. Et à la troisième ligne, nous disons d'utiliser le soulagement fonction de minutage d'animation, qui fera que le mouvement commence rapidement puis ralentit vers la fin.
Lorsque vous enregistrez et actualisez votre page, vous devriez voir la main gauche venir de côté et s’arrêter au centre, comme illustré ci-dessous, pendant un bref moment avant de disparaître:
Nous allons maintenant créer une autre animation presque identique à la première, la différence étant que l’élément entrera de la droite à la place de la gauche. Ajoutez ce CSS à votre style:
@keyframes infromright from transform: translate (100%); opacité: 1; à transformer: traduire (0%); opacité: 1;
Vous verrez que dans le de image clé, nous traduisons par 100% au lieu de -100%, ce qui pousse le point de départ de l'animation au-delà du bord droit. Tout le reste dans ce code est identique à la dernière animation.
Nous allons appliquer cette animation à l'élément main arrière du SVG en ajoutant ce code:
#rearhand nom-animation: infromright; animation-durée: 1.5s; animation-timing-function: sortie facile;
Maintenant, vous devriez voir les deux mains se rejoindre jusqu'à ce qu'elles se croisent au milieu avant de disparaître à nouveau.
Nous avons déjà les deux mains ouvertes qui disparaissent une fois qu'elles ont fini de bouger. Ensuite, nous devons faire apparaître instantanément l’élément mains jointes au moment exact où les mains ouvertes disparaissent..
Pour ce faire, nous allons créer une autre animation d'image clé nommée instantané. Tout ce que cette animation fera est de définir la opacité à 1 tout au long de l'animation. Ajoutez ce CSS dans votre fichier:
@keyframes instantappear de opacity: 1; à opacité: 1;
Appliquer l'animation à la #claspedhands élément avec ce code:
#claspedhands nom-animation: instantappear; animation-durée: 1s; délai d'animation: 1.5s; animation-fill-mode: en avant;
Ici, dans les deux premières lignes, nous appelons notre instantané animation et mettre sa durée à 1 seconde.
Dans la troisième ligne, nous disons à l'animation retard par 1,5 seconde, ce qui correspond à la durée de nos deux premières animations. De cette façon, dès qu'ils auront fini, cette animation commencera.
Ensuite, à la quatrième ligne, nous définissons la mode de remplissage d'animation propriété à avant. Cela signifie que l'animation doit s'arrêter sur sa dernière image et y rester. Cela maintiendra l'élément à la opacité de 1 définir dans l'image clé de fin, au lieu de revenir à la valeur par défaut opacité de 0 comme nos mains avant et arrière ont fait.
Prévisualisez votre animation et quand elle est terminée, vous devriez voir ceci:
Une seule animation supplémentaire est nécessaire pour les trois éléments restants, une animation intégrant tout ce à quoi elle s'applique. Nous pouvons l’utiliser sur chaque élément avec différents réglages pour compléter notre séquence..
Créer une nouvelle animation nommée fadein et le mettre à la transition de opacité 0 à opacité 1 ainsi:
@ images clés fadein from opacity: 0; à opacité: 1;
Le ruban vert est le prochain élément que nous voulons voir apparaître, alors appliquez notre nouveau fadein animation à elle avec le CSS suivant:
#ribbon nom-animation: fadein; animation-durée: 0.75s; délai d'animation: 1,75 s; animation-fill-mode: en avant;
Ici, l'effet de fondu dure trois quarts de seconde et nous le configurons pour qu'il commence à 1,75 seconde, une fois les animations précédentes terminées. Encore une fois nous utilisons animation-fill-mode: en avant; pour assurer l'élément opacité reste à 1 plutôt que de revenir à 0.
Lorsque votre séquence est terminée, vous devriez maintenant voir ceci:
Nous allons maintenant faire fondre le texte principal. Nous avons déjà un #wmhd style dans le document, mettez-le à jour comme suit:
#wmhd font-weight: bold; taille de police: 72px; remplir: # 282828; nom-animation: fadein; animation-durée: 0.75s; délai d'animation: 2.25s; animation-fill-mode: en avant;
Nous utilisons le même code que nous avons fait sur le #ruban élément, il suffit de repousser le délai à 2,25 secondes pour étaler l’apparence des éléments.
Votre animation devrait maintenant se terminer à cet état:
Enfin, nous devons faire apparaître la date, alors mettez à jour le fichier existant. #rendez-vous amoureux style à:
#date taille de la police: 48px; remplir: # 278927; nom-animation: fadein; animation-durée: 0.75s; animation-delay: 2,75s; animation-fill-mode: en avant;
Encore une fois, le seul changement consiste à repousser l'heure de début de l'animation.
Avec ce dernier morceau de code, votre animation est maintenant terminée et quand elle est terminée, elle devrait ressembler à ceci:
Pour plus d'informations sur la Journée mondiale de la santé mentale, visitez le site Web de l'OMS.
Accentsconagua