$ 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é
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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é 7 tutoriels et obtenu une note moyenne de 4,2/5 sur 153 tutoriels vendus. Voir les autres formations de Graphoeil

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de fastzibon laissé le 06/10/2016
    Pour l'instant, c'est bien, quelques erreurs sur les raccourcis - confusion entre Shift Pomme et Commande - mais ça n'est pas bien grave. Les utilisateurs de Mac corrigeront
    "Merci pour votre commentaire, c'est vrai qu'après plus de 20 années de Mac dans la tête j'ai plus l'habitude de dire pomme que commande ,-)"

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


non, je ne veux pas me former gratuitement