Découverte d’Animate. A savoir: pour animer un personnage il faut absolument le convertir en symbole.(movie-clip) (interpolation de mouvement) Pour les formes, une interpolation de forme sans conversion. Également: shift F5 supprime une image (la ligne de temps diminue) shift F6 supprime l’image clef. Pour animer un élément: Cliquer sur la « timeline » au niveau de la…
Bloc, proportion
Quelques exemples pour garder les blocs proportionnels, hauteur-largeur. Avec les nouvelles « dimension » VW pour la largeur et la hauteur. Ou en insérant un bloc invisible à l’aide d’un : : before et d’un display: flex; Cette méthode peut-être utile pour les iframe. Exemple de code:
Intégrer du SVG
Pour intégrer du SVG dans une page HTML nous nous servons d’illustrator. Dans notre carte (oui nous faisons une carte cliquable) il faut nommer les groupes pour chaque objets (ici département) si nous voulons styler ces objets, après dans le code. Dans fenêtre – Option d’objet, donner une url aux objets et définir la zone…
Image-picture
Pour chargé des images en multiple format . Le navigateur choisira dans l’ordre celui qu’il peut ouvrir. Exemple du code: <picture> <source srcset= »images/172724622_ecaa7b22d1_b_resultat.webp » type= »image/webp »> <source srcset= »images/172724622_ecaa7b22d1_b_resultat.jpg » type= »image/jpeg »> <img src= »images/172724622_ecaa7b22d1_b_resultat.jpg »></picture> Et en responsive? Une technique permet à la même image, que l’on insert plusieurs fois et de différente taille, d’être choisie en fonction de la taille…
Audio et vidéo
Le code minimum pour intégrer de la vidéo et de l’audio sur une page html Dans l’ordre (ci-dessous) vidéo de dossier lié au site, audio de dossier lié au site et iframe provenant de youtube. Le rendu sans css: Pour choisir une image (poster) à mettre en avant: <video controls poster= »https://lp.trucdev.fr/animaux/600/400/5″> <source src= »medias/luckyducky.mp4″ type= »video/mp4″> </video>…
Animation, suite!
Mettre en application les animations les transitions sur une galerie La partie code html et css qui nous intéresse: Travail perso: Le code
Animation 3D
La base d’un cube 3D: Mettre ce cube sur un plan. Un article pour faire un cube vraiment intéressant https://la-cascade.io/creer-un-cube-en-css/ N’hésitez pas à cliqué sur voir la démo Par la suite: Pour donner un effet de perspective il faut englober les cubes dans une autre div et utiliser la propriété » perspective: 2000px; » Avec quelque transitons…
Animation avec les »sprite »
La technique consiste à charger toute les images d’une animation et de n’en afficher qu’une seul. Ensuite, de déplacer le fond de manière à faire apparaitre la seconde image, puis la troisième, etc … pour donner ainsi l’illusion de mouvement. Ceci peut-être répéter à l’infinie. Ici un exemple de code, donnant l’illusion d’un personnage qui…
Animation et Javascript
Une première animation avec intégration de javascript. En commentaire les différente méthode d’intégration du onclick. Dans le html ou dans un script. Il faut bien faire attention à ce que chaque bouton et élément devant être actionné en même temps face partie d’un parent commun. Le script du fichier classlist.js
Evaluation
Une bannière à reproduire. D W 0 2 Les Web Designers de première classe Mon code: Le code du prof: Le: animation-fill-mode: both; sert ici au fait que les billes étant placé à gauche (dans l’exemple du prof), les billes ne seront pas vues a gauche au démarrage. Nous pouvons faire repartir les billes, au survol, en…