Animation de l'icône burger d'un menu
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Animation de l'icône burger d'un menu

Sébastien Imbert
13,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto CSS3 et Javascript, je vous propose d'apprendre à créer et animer un menu Burger. Grâce aux propriétés du CSS3, il est possible de créer, mais aussi d'animer cette icône, sans faire appel à de ressources extérieures (gif, font-icône, etc.).

L'icône Burger est généralement représentée par trois traits horizontaux pour indiquer à l'utilisateur la présence d'un menu. De plus en plus incontournable, elle est très souvent présente sur les versions mobiles de sites web, mais parfois aussi sur des versions desktop.

Au programme de ce cours Création et Animation d'un menu Burger :

Ce tuto se divise en trois chapitres, chaque chapitre sera dédié à une animation correspondant à un niveau de difficulté (débutant, intermédiaire, et avancé)

Au cours des différents chapitres, nous verrons :

  • comment créer une icône burger uniquement en HTML et CSS, ou en l'intégrant directement avec un SVG
  • comment utiliser les pseudo-éléments before et after et les positions absolute et relative
  • comment utiliser la librairie jQuery pour détecter le clic sur l'icône
  • comment faire des transformations et transitions CSS pour créer des animations
  • comment créer un SVG en HTML
  • comment animer un SVG à l'aide des propriétés CSS stroke-dasharray et stroke-dashoffset
  • comment savoir quand utiliser une librairie Javascript ou le CSS pour faire une animation sur du SVG

À la fin de ce tutoriel, vous saurez reproduire les 3 animations de ce tutoriel, mais aussi créer vos propres animations à l'aide des connaissances acquises au cours du tuto.

Je reste bien sûr disponible dans la section d'entraide de ce cours pour répondre à vos questions.

Les fichiers sources sont fournis.
 

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Première animation
Chapitre 2
Deuxième animation
Chapitre 3
Troisième animation

Plan détaillé du cours

Chapitre 1 : Première animation
20m29
 
Leçon 1Création de l'icône statique
Leçon 2Création du script jQuery
Leçon 3Animation de l'icône
Chapitre 2 : Deuxième animation
39m05
 
Leçon 1Création de l'icône statique et effet de hover
Leçon 2Animation de l'icône
Leçon 3Bien comprendre la propriété CSS transform-origin
Leçon 4Création de la bordure en SVG
Leçon 5Animation de la bordure
Chapitre 3 : Troisième animation
31m41
 
Leçon 1Intégrer le SVG dans le HTML
Leçon 2Animation du SVG 1/2
Leçon 3Animation du SVG 2/2
Leçon 4Transitions CSS avec cubic-bezier

Aperçus

Avis des apprenants

Détail des avis
269
Apprenants
14
Commentaires
4,9/5
Note moyenne
5/5
13
4/5
0
3/5
1
2/5
0
1/5
0
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 18/08/2024
Merci pour ce tuto super sympa, même si j'ai un peu galéré sur le deuxième. Il ne reste plus qu'à trouver des idées.
Valérie Caruana
Valérie Caruana
Publié le 24/06/2024
Super intéressant ! Merci beaucoup. Grandes qualités pédagogiques, facile à suivre et généreux dans les explications supplémentaires (notamment pour stroke-dasharray & offset ;-) Et super pour les explications Ai - svg . Par contre une question : impossible de trouver lmgoncalves github segment dont le lien ne doit plus être celui qui était valide lors de l'enregistrement de la vidéo.
Valérie Arno
Valérie Arno
Publié le 18/06/2024
J'ai laissé tomber. Trop compliqué. En plus on y voit rien, vous ne zoomez pas votre logiciel. C'est la première fois que je lâche un tuto. Et je ne vois pas pourquoi utiliser jQuery, utiliser simplement JavaScript aurait suffit. Bref. Ils exagèrent de mettre ce genre de tuto dans le parcours FrontEnd.

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

CSS 3, jQuery

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Payer plus tard

Prix d'achat : 13,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1400 tutos gratuits

Notre politique de protection des données