01 40 26 00 99 15 rue de turbigo - 75002 Paris Nous contacter

Techniques d'animation HTML5, CSS3, SVG : techniques d’animation

Créer des animations et des bannières HTML5 pour le Web

Icon2018 module presentiel
ObjectifsMaîtriser le module CSS3 TransitionTransformer les objets d’une page avec Tranforms 2D et 3DCréer des animations simples avec le module CSS3 AnimationCréer une illustration vectorielle en SVG et l’animer en CSS
Public concernéWebdesigners, intégrateurs, développeurs ou toute personne qui utilise déjà les CSS.
Pré-requisIl est nécessaire d’avoir suivi le stage “HTML5, CSS3 et le responsive Web design” (page 132), de maîtriser les sélecteurs CSS2.1 et CSS3 et les techniques de mise en pages actuelles pour accéder à cette formation. Une pratique de JavaScript est un plus.
Programme

Réviser les propriétés graphiques de CSS3

Réviser les différentes méthodes et déclarations pour créer des motifs et des dégradés : background-size, background-origin, background-clip, multiple backgrounds

Formater le texte avec @font-face et text-shadow

Dessiner des bordures originales avec les déclarations border-radius et border-image

Exercice : créer une bannière animée simple

Maîtriser le module CSS3 Transition

Utiliser les sélecteurs “déclencheurs” :hover, :target, :focus, :checked, ˜

Lister et détailler les propriétés de transition : transition-name, transition-duration, transition-delay, transition-timing-function

Comprendre le principe et les différentes valeurs des courbes de Bézier

Lister et utiliser les propriétés CSS3 “transitionnables” et “animables”

Exercice : créer un slide interactif avec Transition et Translate

Transformer les objets d’une page avec Transforms 2D et 3D

Afficher un texte verticalement avec rotate

Déformer et déplacer une boîte avec skew, scale et translate

Définir les points de transformation avec transform-origin

Comprendre les notions et valeurs des déclarations perspective, perspective-origin

Transformer un objet sur ses axes verticaux et horizontaux avec rotateX et rotateY

Déplacer un objet dans l’espace 3D avec l’indice de profondeur translateZ, rotate3D, translate3D

Exercice : créer des objets animés en 2D et 3D

Créer des animations simples avec le module CSS3 Animation

Coder la règle @keyframes et la “préfixer”

Lister et détailler les valeurs animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction

Déclencher et arrêter une animation avec animation-play-state

Accélérer / décélérer avec animation-timing-function

Contrôler la tête de lecture avec animation-backwards et animation-forwards

Exercice : créer plusieurs bannières animées en utilisant et détaillant chacune des valeurs du module Animation

Créer une illustration vectorielle en SVG et l’animer en CSS

Identifier les différents usages du SVG sur Internet : icônes, dataviz, bannières, responsive design…

Créer et modifier un dessin en SVG dans Illustrator et / ou Inkscape

Découvrir le format et analyser le code source d’un dessin SVG

Optimiser un dessin SVG avec les outils en ligne en vue de l’animer

Étudier les différentes solutions pour insérer une image SVG dans une page Web

Lister et détailler les attributs SVG et CSS “animables”

Animer des illustrations SVG avec les CSS

Exercice : créer des bannières et des icônes en SVG et les animer en CSS

Méthodes pédagogiquesLogiciels : WebStorm, Brackets, Illustrator…
Moyens techniquesMoyens spécifiques à cette formation :Alternance de théorie, de démonstrations et de mise en pratique grâce à de nombreux exercices. Ces derniers sont réalisés individuellement, puis corrigés collectivement afin que les différentes solutions possibles puissent être confrontées et analysées.

Moyens génériques :

  • d’un poste de travail Mac ou PC de dernière génération équipé d’un écran plat 21” ou 27”
  • d’une tablette graphique
  • d’un iPad sur demande
  • d’une connexion très haut débit à Internet
  • d’une clé USB de 8 Go offerte en début de formation
  • Le poste du formateur est relié à un système de vidéo projection
  • 8 participants maximum par stage
  • 9 participants pour les formations certifiantes
  • Toutes les formations sont dispensées sur les dernières versions officielles de chaque logiciel
  • Un support de cours ou un livre est remis à l’issue des principaux stages
Suivi
  • Chaque apprenant bénéficie d’une hotline gratuite et illimitée par e-mail
  • Fiche d’évaluation, feuille d’émargement et attestation de présence
Profil du formateur

Intégrateur CSS / Développeur front-end ayant plus de 10 ans d’expérience en enseignement.

Marketing Digital
Web
Médias sociaux
Voir toutes les formations

HTML5, CSS3, SVG : techniques d’animation

3 jours 21 heures 1 600 € HT

Sélectionner une date dans la liste :

Vous devez sélectionner une date

Sélectionner votre profil :

Vous devez sélectionner votre profil

HTML5, CSS3, SVG : techniques d’animation

3 jours 21 heures 1 490 €HT*


* Prix par jour (à partir de)

Organisez cette formation dans votre entreprise selon vos plannings et les disponibilités de nos intervenants (dates continues ou discontinues).

Cliquez ici pour plus d'informations

Ce tarif inclut :

  • La préparation pédagogique de la formation par notre équipe (validation des pré-requis, définition des objectifs et des compétences visées
  • Un entretien téléphonique avec le formateur
  • L’animation de cette formation dans vos locaux pour 3 stagiaires maximum
  • Les supports de cours (si prévus)
  • La gestion administrative de la formation (frais de dossier, devis, conventions…)

Ce tarif n’inclut pas :

  • La mise à disposition du matériel nécessaire au bon déroulé de la formation (ordinateurs, vidéo-projecteur, logiciels…),
  • De rendez-vous de préparation avec le formateur,
  • La conception de supports spécifiques,
  • Les éventuels frais de déplacement et d’hébergement du formateur.

Important :

  • Ces formations peuvent également être organisées dans nos salles de formation exclusivement pour vos collaborateurs (dans ce cadre, nous nous chargeons de tous les aspects logistiques).
  • Dans le cadre de formations « intra / sur mesure », la durée des formations peut bien sûr être modifiée selon vos impératifs et objectifs

Fermer

Demander un devis
L'avis des participants
Stage très utile. Apprentissage des bases jusqu'à un niveau avancé.
Kévin G. - Webdesigner pour Alkor (session du 5 au 7 juillet 2017)
Au top, ne changez rien !
Yann D. - Intégrateur web pour Camaieu (session du 15 au 17 mars 2017)