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…
Mois : janvier 2019
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…
Animation
La règle @keyframes Lorsque vous spécifiez des styles CSS dans la @keyframes règle, l’animation passera progressivement du style actuel au nouveau style à certains moments. Pour qu’une animation fonctionne, vous devez la lier à un élément. L’exemple suivant lie l’animation « exemple » à l’élément <div>. L’animation durera 4 secondes et changera progressivement la couleur de fond de l’élément <div>…
Transition css, timing-function
Pour illustrer le style transition-timing-function: nous avon fait un exercice. linear ease ease-in ease-out ease-in-out steps(3,start) steps(3,end) transition-timing-function: cubic-bezier(0.505, -0.560, 0.495, 1.465) transition-timing-function:cubic-bezier(0.000, 3, 1.000, -1) transition-timing-function: cubic-bezier(1.000, 0.960, 0.000, 0.615) transition-timing-function: cubic-bezier(1.000, 0.010, 0.000, 1.000) transition-timing-function: cubic-bezier(0.000, 1.020, 0.995, 1.440) Pour générer une transition en une courbe de bezier nous avons…
Transition css
Transition css 2D Nous voyons aujourd’hui les transition, en css. Les transitions CSS vous permettent de modifier les valeurs de propriété en douceur (d’une valeur à une autre), sur une durée donnée. Pour créer un effet de transition, vous devez spécifier deux choses: la propriété CSS à laquelle vous voulez ajouter un effet la durée…