Animation SVG avec jQuery et GreenSock
ERROR
00:00
00:00

TUTO Animation SVG avec jQuery et GreenSock

Graphoeil
8,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Ce tuto vidéo, va vous permettre de comprendre les techniques d'animations d'un logo SVG créé dans Illustrator en .eps puis intégré en SVG directement dans notre fichier .html pour animer chacun de ses éléments.

Avec cette technique, chaque élément du logo devient un élément du DOM manipulable à souhait avec jQuery et Greensock. Vous avez besoin de placer un logo animé sur une page web, et que ce dernier soit super léger en poids, et retina ? Optez pour ce tuto !

Au programme de ce tuto Animation d'un logo SVG

  • Comment préparer notre logo dans Illusrtaor en vue de l'animer par la suite
  • Comment exporter le logo en SVG
  • Comment optimiser le fichier SVG en utilisation SVG Editor (de Peter Collingridge)
  • Comment importer un logo SVG dans une page HTML
  • Comment faire en sorte que l'image SVG soit responsive (s'adapte à la taille de votre écran, dans une logique de mobile first) en fonction de nos mediaqueries
  • Comment créer des classes qui seront appliquées au SVG
  • Comment animer les différents éléments qui constituent le logo avec jQuery et Greensock

Pour ce tuto, j'ai utilisé Dreamweaver mais vous pouvez bien entendu utiliser l'éditeur HTML de votre choix. Je joins avec le cours, les fichiers sources finaux avec le svg optimisé au cas où vous n'auriez pas Illustrator. Je reste disponible dans le salon d'entraide de ce tutoriel pour répondre à vos éventuelles questions.

Bonne formation !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Introduction
Leçon 2
Créer les calques dans Illustrator et exporter en SVG
Leçon 3
Créer la page HTML puis optimiser et intégrer le SVG
Leçon 4
Quelques styles CSS...
Leçon 5
Ajouter les classes sur le SVG
Leçon 6
Animation du logo

Plan détaillé du cours

Leçon 1Introduction
01m04s
Leçon 2Créer les calques dans Illustrator et exporter en SVG
09m14s
Leçon 3Créer la page HTML puis optimiser et intégrer le SVG
11m52s
Leçon 4Quelques styles CSS...
10m11s
Leçon 5Ajouter les classes sur le SVG
04m44s
Leçon 6Animation du logo
18m46s

Aperçus

Avis des apprenants

Détail des avis
111
Apprenants
5
Commentaires
4,8/5
Note moyenne
5/5
4
4/5
1
3/5
0
2/5
0
1/5
0
Stephane Boudehent
Stephane Boudehent
Publié le 17/06/2022
Très bon tuto, bravo ! De plus excellente réactivité pour répondre à nos questions
Alain Brus
Alain Brus
Publié le 15/10/2019
Très bon tuto facile à suivre qui fait découvrir Greensock.... Super Bravo!
Graphoeil
Merci pour votre commentaire ,-) Vous verrez, une fois bien en main, on ne peut plus s'en passer, si vous voulez allez encore plus loin avec greensock je vous conseil https://ihatetomatoes.net/
Matthieu76
Matthieu76
Publié le 06/08/2017
Très bien merci. Une première idée des capacités de Greensock !
Graphoeil
Merci pour votre note et votre commentaire ,-)

Vos questions sur le cours

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

jQuery , JavaScript

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données