HTML5 et CSS3 : techniques d`animation

15 rue de Turbigo, 75002 Paris
Tél. : 01 40 26 00 99
[email protected]
15 rue de Turbigo, 75002 Paris
www.pyramyd-formation.com
Tél. : 01 40 26 00 99
15 rue de Turbigo, 75002 Paris
Tél.
:au
01 capital
40 26 00
99 000 €
SAS
de 110
[email protected]
RCS
Paris
n°
351
996
509
www.pyramyd-formation.com
[email protected]
NAF : 8559A
www.pyramyd-formation.com
TVA
Intracom
FR110
09000
351 996
SAS au
capital: de
€ 509
SIRET
:
351
996
509
00029
RCS Paris n° 351 996 509
SAS au capital de 110 000 €
NAF : 8559A
RCS
Paris n°
996 509
Organisme
de351
TVA Intracom
:formation
FR 09 351 996 509
NAF 75
: 8559A
n°11
15095
75
SIRET : 351 996 509 00029
TVA Intracom : FR 09 351 996 509
SIRET : 351 996 509 00029
Organisme de formation
n°11 75 15095 75
Organisme de formation
n°11 75 15095 75
HTML5, CSS3, SVG :
techniques d’animation
Créer des animations et des bannières HTML5 pour le Web
3 jours / 21 HEURES
1 500 € HT
OBJECTIFS
CODE : WM067
MÉTHODES PÉDAGOGIQUES
¬¬ Réviser les propriétés graphiques de CSS3
¬¬ Maîtriser le module CSS3 Transition
¬¬ Transformer les objets d‘une page avec Tranforms
2D et 3D
¬¬ Créer des animations simples avec le module ¬
CSS3 Animation
¬¬ Créer une illustration vectorielle en SVG et l‘animer
en CSS
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 TECHNIQUES / SUIVI
¬¬ Logiciels : WebStorm, Brackets, Illustrator…
Conditions générales : voir page 9.
PUBLIC CONCERNÉ
Webdesigners, intégrateurs, développeurs ou toute
personne qui utilise déjà les CSS.
PRÉ-REQUIS
PROFIL DU FORMATEUR
Intégrateur CSS / Développeur front-end ayant plus
de 10 ans d‘expérience en enseignement.
Il est nécessaire d‘avoir suivi le stage “HTML5, CSS3
et le responsive Web design” (page 139), 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 transformorigin
• 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 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, animationiteration-count, animation-direction
Déclencher et arrêter une animation avec animationplay-state
Accélérer / décélérer avec animation-timing-function
Contrôler la tête de lecture avec animationbackwards 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
de profondeur translateZ, rotate3D, translate3D
➔➔Exercice : créer des objets animés en 2D et 3D
PLANNING 2016 / 2017
PYRAMYD NTCV est une marque
du groupe
www.abilways.com
PYRAMYD NTCV est une marque
du groupe
PYRAMYD NTCV est une marque
www.abilways.com
du groupe
>
>
>
12 au 14
décembre
2016
>
>
15 au 17
>
>
>
mars
2017
5 au 7
>
>
>
20 au 22
>
juillet
2017
novembre
2017