8,00

Tuto Animation SVG avec jQuery et GreenSock avec jQuery, JavaScript

8,00

  • Une formation vidéo de 55m51s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Animation SVG avec jQuery et GreenSock

ajouter ce cours aux favoris retirer ce cours des favoris

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



Formateur : Graphoeil

Graphoeil a publié 8 tutoriels et obtenu une note moyenne de 4,5/5 sur 316 tutoriels vendus. Voir les autres formations de Graphoeil

4,8
note moyenne

5
avis laissés
5 étoiles
4
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de darkwolf74000 laissé le 17/06/2022
    Très bon tuto, bravo ! De plus excellente réactivité pour répondre à nos questions

  • 5
    avis de abrus laissé le 15/10/2019
    Très bon tuto facile à suivre qui fait découvrir Greensock.... Super Bravo!
    "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/"

  • 5
    avis de matthieu76 laissé le 06/08/2017
    Très bien merci. Une première idée des capacités de Greensock !
    "Merci pour votre note et votre commentaire ,-)"

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    jQuery , JavaScript
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1407 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données