$ 14.00

Tuto Animation de l'icône burger d'un menu avec CSS, jQuery

$ 14.00

  • Une formation vidéo de 1h31m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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.
 

Table des matières de cette formation CSS, jQuery (durée : 1h31m)

  • Première animation
    • Création de l'icône statique 00:09:52
    • Création du script jQuery 00:04:57
    • Animation de l'icône 00:05:40
  • Deuxième animation
    • Création de l'icône statique et effet de hover 00:11:10
    • Animation de l'icône 00:10:01
    • Bien comprendre la propriété CSS transform-origin 00:03:25
    • Création de la bordure en SVG 00:07:02
    • Animation de la bordure 00:07:27
  • Troisième animation
    • Intégrer le SVG dans le HTML 00:09:22
    • Animation du SVG 1/2 00:08:27
    • Animation du SVG 2/2 00:07:24
    • Transitions CSS avec cubic-bezier 00:06:28



Formateur : Sébastien Imbert

Sébastien Imbert a publié 23 tutoriels et obtenu une note moyenne de 5,0/5 sur 5 218 tutoriels vendus. Voir les autres formations de Sébastien Imbert

5,0
note moyenne

4
avis laissés
5 étoiles
4
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de yuankiller laissé le 20/05/2018
    Excellent tuto, super bien expliquer, qui permet d'utiliser un SVG pour faire de jolies animations pour ce fameux menu burger. :)

  • 5
    avis de komarianne laissé le 19/02/2018
    Encore une fois, un excellent tuto, très bien expliqué et très détaillé. Les deux parties sur photoshop notamment, ont largement contribué à éclairer ma lanterne :)... La 3è partie est évidemment plus ardue, mais encore une fois, accessible grâce à la clarté des propos et à la maîtrise du sujet par Sébastien. Bravo !
    "Merci komarianne, je suis content d'apprendre que le chapitre 3 reste accessible et que l'utilisation de Photoshop comme support visuel aide à la compréhension. C'est vrai que la partie 3 n'est pas la plus simple à comprendre. ^^"

  • 5
    avis de rossi56 laissé le 16/02/2018
    Tuto très intéressant qui montre des bases essentielles de l'animation en css ainsi que du svg. Très bien expliqué et très clair. Je suis fan. Merci beaucoup Sébastien

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    CSS 3, jQuery
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
accédez à plus de 1153 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données