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 !
Table des matières de cette formation jQuery, JavaScript (durée : 55m51s)
-
- Introduction gratuit 00:01:04
- Créer les calques dans Illustrator et exporter en SVG 00:09:14
- Créer la page HTML puis optimiser et intégrer le SVG 00:11:52
- Quelques styles CSS... 00:10:11
- Ajouter les classes sur le SVG 00:04:44
- Animation du logo 00:18:46
- Fichiers sourcestélécharger
- Certificat
Formateur : Graphoeil
-
Très bon tuto, bravo ! De plus excellente réactivité pour répondre à nos questions
-
Très bon tuto facile à suivre qui fait découvrir Greensock.... Super Bravo!
-
Très bien merci. Une première idée des capacités de Greensock !
-
Avec quelles versions de logiciels ce tuto est-il compatible ?jQuery , JavaScript
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés