Déposer vos menus à l'aide d'animation avec CSS

Sep 11, 2025

Comment

[dix] [dix] [dix]

[dix]

C'est à travers l'animation que nous avons du sens du monde: les portes se balancent, les voitures se dirigent vers leurs destinations, les lèvres se courrissent dans des sourires. Même les choses qui se sentent instantanées, comme la foudre frappant ou laissant tomber un téléphone sur votre visage tout en l'utilisant au lit, se produisent au fil du temps. C'est à travers cette motion que nous comprenons comment les objets concernent et fonctionnent; S'ils sont légers ou lourds, rigides ou lâches, connectés ou séparés, collants ou glissants.

[dix]

Sur le Web, cependant, nous nous sommes habitués à des choses apparaissant et disparaissent en un clin d'œil. Nous cliquons sur un lien et tout change. C'est comme être conduit dans une pièce aux yeux bandés, tournant autour de quelques reprises et enlevant le bandeau pour prendre dans les environs. Vous ne savez même pas quelle porte vous avez entrée. C'est à la manière dont la plupart des sites sont construits. Nous pouvons faire mieux.

Lors de l'apprentissage du potentiel de Animation CSS , Il peut être facile de laisser nos imaginations entrer dans l'hyperdrive et saupoudrer des animations sur à peu près tout. Alors que l'animation peut être grande, nous devons faire attention et toujours nous demander: cette animation est-elle significative? Est-ce que cela ajout de valeur autre que d'être belle? Est-ce que notre produit est-il plus facile à utiliser?

Animation significative

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — Ceci est le point de départ du tutoriel - le menu d'échantillon que nous allons révéler avec une animation

Dans cet article, nous allons travailler avec un commun Conception de l'interface utilisateur Elément: un menu bascule. Nous allons créer le menu (et une icône pour y aller) avec CSS et le faire vivre avec des animations. Nous veillerons à ce que les animations sont significatives, mais appliquons également les meilleures pratiques de performance Web pour qu'ils soient aussi lisses que possible.

Tu peux Aperçu du résultat final ici . Lorsque l'utilisateur clique sur l'icône de menu, nous développerons la plaque d'arrière-plan de l'icône (un cercle) pour couvrir l'écran et présenter la superposition du menu.

[dix]

Plutôt que de clignoter simplement dans une icône de près, nous allons animer et former les trois lignes verticales (qui constituent l'icône de menu) dans un «X», pour représenter une icône de fermeture. En d'autres termes, lorsque le menu est révélé, l'icône se transforme dans un bouton de fermeture.

Éléments connexes

Vous pourriez penser 'Alors, est-ce une animation significative?' Eh bien, bonne question. Réponse courte: oui! Réponse plus longue: Les animations sont excellentes lors de la connexion des éléments de l'écran et montrant comment ils se rapportent les uns aux autres.

Lorsque nous accumulons la plaque arrière de l'arrière-plan du menu pour devenir le menu, nous montrons comment les deux sont connectés - semblables à la manière dont une icône d'application, lorsque vous appuyez sur IOS ou Android, échelle et reprend l'écran, montrant que l'application a été lancée à partir de l'application. cette icône même. Notre icône de menu ne fait que basculer le menu: c'est le menu, ne s'est effondré que.

De même, comme comment une bascule ON / OFF se transforme entre son état On et OFF lorsque vous appuyez sur IOS sur IOS, notre commutation de menu changera entre une icône de menu et une icône de fermeture selon que si le menu de notre site est visible ou masqué. Cela aide à faire respecter l'idée que les deux icônes fonctionnent de la même manière: elles contrôlent tous les deux le menu.

Ainsi, alors que nous faisons notre site amusant à utiliser, nous facilitons également la compréhension et l'amélioration de la expérience utilisateur jamais tellement légèrement.

[dix]

Voir comment faire cela dans le didacticiel vidéo ci-dessus et les étapes écrites ci-dessous.

01. Commencez

By drawing the menu icon with CSS (and no images), we can easily animate it later — En dessinant l'icône de menu avec CSS (et pas d'images), nous pouvons facilement l'animer plus tard

Téléchargez les fichiers de projet . S'ouvrir index.html Dans un navigateur et que vous devriez voir trois grands liens contre un fond blanc. C'est la superposition du menu que nous allons révéler.

Tout d'abord, nous devons le cacher. Dans styles.css , ajoutez ces styles à .Menu-superposition :

 Opacité: 0;
Visibilité: caché;

Avec la superposition terminée, un bouton doit apparaître dans le coin supérieur gauche. Dessinons notre icône de menu ici, il y a donc quelque chose à cliquer sur pour afficher la superposition. Pour faciliter l'animation, nous le dessinerons en utilisant simplement HTML et CSS; Pas de bitmaps ou de vecteurs. Nous avons déjà du HTML dans index.html Pour le menu: un conteneur ( .menu ), un arrière-plan ( .Menu-cercle ), un lien ( .Menu-link ) et l'icône ( .Menu-icon ) avec une période pour chaque ligne.

Avoir un séparé diviser Pour le contexte, c'est une approche quelque peu non conventionnelle. Si nous n'étions pas sur le point d'ajouter des animations à ce cercle, nous n'avons pas besoin d'un séparé diviser ; Nous pourrions simplement ajouter un rayon de frontière et couleur de fond à notre liaison de menu .

Cependant, nous voulons être libres d'utiliser le transformer Propriété sur le cercle, nous pouvons donc l'accabler sans affecter l'icône elle-même, nous devons donc découpler le fond de l'icône.

Commençons à dessiner les lignes qui constituent l'icône. Qu'est-ce qu'ils ont tous en commun? Ils sont également larges, ils ont des coins arrondis, sont absolument positionnés et ont une couleur de fond. Puisque toutes les lignes partagent la ligne de menu classe, utilisons-le pour définir ces propriétés partagées:

 .Menu-line {
 Couleur de fond: # 333;
 Hauteur: 2px;
 largeur: 100%;
 frontière-rayon: 2px;
 Position: absolu;
 à gauche: 0;
}

Ensuite, nous pouvons utiliser les classes uniques des lignes pour définir la position verticale:

 .Menu-line-1 {TOP: 0; }

.Menu-line-2 {
 TOP: 0;
 bas: 0;
 Marge: Auto;
}

.Menu-line-3 {bas: 0; }

02. Ajouter un effet de survol

To make the menu appear clickable, we inflate the background plate on hover — Pour que le menu semble cliquer, nous gonflons la plaque d'arrière-plan sur la survolte

Faisons l'icône clairement cliquée en ajoutant un effet de survol. Dans styles.css , créez un nouveau sélecteur pour encercler Pour l'accabler lorsque vous allumez au-dessus du menu:

 .Menu: survolez .Menu-cercle {transformer: échelle (1.4); }

Maintenant, nous pouvons ajouter notre première animation. Ajouter "TRANSITION: TOUS 0.2S FACI-IN-OUT" à .Menu-cercle {} (pas à l'état de survol). Nous disons au navigateur d'animer toutes les propriétés pouvant changer pour .Menu-cercle . Ainsi, lorsque nous l'échouons sur Hover, il anime au cours de 0,2 seconde à son nouvel état, avec une fonction de synchronisation de soin .

Comment savez-vous quelle fonction de synchronisation choisir? Tout d'abord, évitez d'utiliser une fonction de synchronisation linéaire. Peu de choses dans le monde réel se déplacent à une vitesse parfaitement constante, des objets animés avec une fonction de synchronisation linéaire ont tendance à sembler non naturel et raide (comme l'a dit Einstein, «Dieu ne joue pas de dés avec une fonction de synchronisation linéaire»).

En règle générale, tranquillité fonctionne bien pour présenter de nouveaux objets et facilité dans Fonctionne idéal pour éliminer les objets. Et en doute, soin est une fonction de synchronisation solide à la valeur par défaut: elle a un début lent et une fin lente, créant une animation lisse et fluide.

03. Afficher et masquer le menu

Utilisons jQuery pour montrer et masquer notre superposition nouvellement créée. Dans script.js , bascule la classe de ouvert sur .Menu-superposition Dans le gestionnaire de clic existant:

[dix]

  $ (". Superposition du menu"). Tobgleclass ("Open");

Puis montrer la superposition quand il a une classe d'ouverture:

 .Menu-superposé.open {
 opacité: 1;
 Visibilité: visible;
}

04. Connectez l'icône du menu

La transition que nous avons ajoutée plus tôt signifie que nous avons déjà un effet de fondu qui se passe lorsque nous montrons et masquons la superposition. Cependant, nous pouvons simplement ressembler à l'icône de menu de l'arrière-plan devient la superposition du menu et mieux connecter les deux visuellement.

Atteindre cet effet est plus facile qu'il ne semble que: tout ce que nous avons à faire est d'agrandir rapidement le cercle de menu quand il a cliqué. La superposition disparaîtra simultanément, créant ainsi l'illusion que l'icône de menu se transforme en la superposition.

Nous devons être capables de styler le cercle du menu lorsque le menu a été cliqué. S'ouvrir script.js et à l'intérieur de notre fonction de clic existante bascule la classe ouverte pour notre .menu :


            $ (". Menu"). Talgleclass ("Ouvrir");

Maintenant, nous pouvons cibler cette classe avec CSS et développer le cercle lorsque le menu est ouvert. Au fond même de style.css , étendre le .Menu-cercle lorsque .menu a aussi une classe de .ouvert :

.menu.open .menu-cercle {transformer: échelle (60);
}

05. Transformer l'icône

The white circle expands to become the menu background, and the icon morphs into an 'X' — Le cercle blanc se développe pour devenir le fond du menu et l'icône se transforme dans un "x"

Nous avons un bel effet révèle pour notre menu, mais comment allumez-nous l'icône du menu en une icône de fermeture? Il est étonnamment facile une fois que vous savez comment, nous aurons seulement besoin de définir trois propriétés CSS. Tout d'abord, nous devons masquer la ligne médiane lorsque le menu est affiché:

 .Menu.open .Menu-line-2 {opacité: 0; }

Ensuite, tout ce que nous avons à faire est de basculer les deux autres lignes de 45 degrés dans des directions opposées (les lignes doivent indiquer différentes directions pour former un «X», notez donc comment l'une des lignes a une rotation négative de 45 degrés):

 .Menu.open .Menu-line-1 {
 transformer: pivoter (-45deg);
}

.menu.open .Menu-line-3 {
 transformer: pivoter (45deg);
}

Eh bien, en quelque sorte. Nous devons également centrer ces deux lignes verticalement. À ce stade, vous pourriez penser 'facile! Nous devons juste changer le Haut et bas position pour les centrer '. Et vous auriez raison - si nous n'étions pas animé cette icône.

Puisque nous ne pouvons atteindre que des animations accélérées du matériel en vous limitant à animer le transformer et opacité Propriétés, nous devrons recourir à la création des lignes à travers des transformations.

 .Menu.open .Menu-line-1 {
 Transformer: Traducty (7px) Traduction (-50%) Tourner (-45DEg);
}

.menu.open .Menu-line-3 {
 Transformer: Traduction (-7PX) Traduction (50%) Tourner (45DEG);
}

Ces transformations déplaceront les deux lignes afin qu'elles soient centrées verticalement dans le conteneur d'icônes, puis les pivoter pour former la croix.

Éliminons-le. Nous avons deux traductions utilisées simultanément: Traducty (7px) et Traduction (-50%) . La première transformée, Traducty (7px) , est utilisé pour déplacer le bord supérieur de la ligne au centre vertical de la toile. Les mathématiques ici sont simples: 14 est la hauteur de notre icône, en le divisant par deux, nous obtenons le point central: 7.

La deuxième transformation, Traduction (-50%) , est utilisé pour déplacer la ligne de sorte que le centre vertical de la ligne, pas son bord supérieur, réside sur le point central vertical de la toile.

Généralement lors de l'utilisation du % Connectez-vous CSS, vous vous référez au parent d'un élément (réglage Largeur: 100% Correspond à la largeur de l'élément à celle de son parent), mais si vous utilisez des pourcentages avec la propriété de transformation, vous vous référez à l'élément lui-même, pas le parent. Donc, pour que nous trouvions la hauteur d'une ligne et la déplacer vers le haut de la moitié de cela, tout ce dont nous avons besoin est Traduction (-50%) .

06. Morph entre les icônes

Au lieu de simplement remplacer l'icône de menu avec l'icône de fermeture, formons-nous entre les deux états.

Commencer par ajouter une transition à .Menu-line dans style.css :

 Transition: toutes les 0,25 soin de la maintenance;

Ta-da! Une icône de menu de morphing. L'animation est un peu terne, cependant. Fixons cela. Pour que les lignes apparaissent plus vives, nous pouvons les faire pivoter à la fois de 90 degrés supplémentaires. L'icône aura l'air identique à la fin, mais les lignes voyageront plus loin pendant la même période. Changer les rotations à Tourner (-135deg) et Tourner (135deg) .

En règle générale, vous pouvez toujours améliorer une animation en utilisant une courbe de Bézier personnalisée qui est mieux adaptée à votre animation. Nous utilisons actuellement soin - Cela signifie que l'animation aura un début et une fin lentement, avec un rythme plus rapide au milieu.

Je pense qu'un effet plus ressemblant à un ressort est adapté à notre icône. Faisons-la tourner rapidement, avec un petit effet de rebond car il s'agit d'une fin. Pour .Menu-line , remplacer " Facilité d'entrée " avec une courbe de Bézier personnalisée:

 Transition: Tous 0.25S cubes-Bézier (0,175, 0,885, 0,32, 1.275);

Quels sont tous ces chiffres? Ne vous inquiétez pas: les courbes de Bézier sont rarement écrites à la main. Tu utilises cubique-bézier () Pour définir le rythme d'une animation au fil du temps, et plutôt que de les écrire vous-même, je recommande d'utiliser un site de référence. Cela vient de réalises.net. Il dépasse à la fin de l'animation et crée un effet de rebond subtil.

Pendant que nous y sommes, allez à réalises.net et saisir le code pour FaibleExpo . Nous allons utiliser ceci pour créer un effet plus raffiné pour l'animation de fond de menu. Mettre à jour la transition de .Menu-cercle Pour utiliser cette courbe de Bézier personnalisée et rendre l'animation un peu plus longtemps (0,5S):

 TRANSITION: TOUS 0.5S Cubic-Bézier (0,19, 1, 0,22, 1);

Félicitations, vous avez créé un ensemble d'animations significatives: ils vous aident à comprendre ce qui se passe sur le site tout en la naviguant, créant un sentiment de sensibilisation spatiale. En plus de cela, les animations se déroulent bien.

En animent uniquement les propriétés de la transformation et de l'opacité, nous pouvons nous assurer que le support d'accélération matérielle du navigateur peut être lancé et éviter un retard inutile. Lorsque vous jouez avec des animations, assurez-vous de cocher ces deux cases: faites-les significatif et beau.

Cet article est apparu à l'origine dans magazine net numéro 281. Abonnez-vous à Net ici .

Articles Liés:

10 exemples impressionnants d'animation CSS3
28 exemples remarquables de CSS
Commencez avec une accessibilité Web

[dix] [dix]

[dix]

Déposer vos menus à l'aide d'animation avec CSS

Animation significative

Éléments connexes

01. Commencez

02. Ajouter un effet de survol

03. Afficher et masquer le menu

04. Connectez l'icône du menu

05. Transformer l'icône

06. Morph entre les icônes

Comment - Most Popular Articles

Tutoriels de cinéma 4D: 13 des meilleurs

Commencez avec Adobe Dimension CC

Comment créer un personnage de jeux vidéo dans zbrush

Exporter des animations après les effets sur HTML5

Créer un effet de texte Wobbly avec JavaScript

Modèle Darth Vader à Zbrush

Faites un gif animé dans Photoshop

Créer un autoportrait avec seulement 4 couleurs

Catégories