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…
ClassList
Basculer les valeurs d’un objet. Le même code simplifier: Evaluation!!! 1ere partie: 2eme partie: Noter qu’il n’y a pas d’espace entre .diapositive.diapositiveActive, dans le css, ceci à pour effet de cibler les deux class. Dans le script, ajouteClass, de la variable lien04, n’est pas util, puisque que la fonction ne sert uniquement qu’…
Galerie Javascript
Exercice concret: Pour intégrer dans la page html, placer juste avant le </body> le chemin du fichier. <script src= »js/galeries01.js »></script> Dans le fichier .js, pour récupérer, placer: var galerie = document.querySelector(‘#galerie-01’); var afficheur = galerie.querySelector(‘.afficheur’); var liens =galerie.querySelectorAll(‘a’); Pour récupérer toutes les photos, il nous faut faire une boucle: for (let i=0; i<liens.length; i++){ liens[i].onclick=function(){ afficheur.src=this.href;…
Les objets et les tableaux
Le JavaScript met à notre disposition des objets natifs, c’est-à-dire des objets directement utilisables. Vous avez déjà manipulé de tels objets sans le savoir : un nombre, une chaîne de caractères ou même un booléen. Que contiennent les objets ? Les objets contiennent trois choses distinctes : un constructeur ; des propriétés ; des méthodes….
Les fonctions
Concevoir des fonctions Dans les chapitres précédents vous avez découvert quatre fonctions :alert(),prompt(),confirm()et parseInt(). Vous avez pu constater que chacune de ces fonctions avait pour but de mener à bien une action précise, reconnaissable par un nom explicite. Voici comment écrire une fonction : function myFunction(arguments) { // Le code que la fonction va devoir exécuter…
Les boucles
Les boucles while La boucle while permet de répéter une liste d’instructions tant que la condition est vérifiée. Tant que celle-ci est vraie (true), la boucle se répète. Dès que la condition est fausse (false), la boucle s’arrête. Il faut s’arranger, à un moment, pour que la condition ne soit plus vraie. Voici un exemple de la…
JavaScript (introduction)
Le JavaScript est un langage de programmation interprété, c’est-à-dire qu’il a besoin d’un interpréteur pour pouvoir être exécuté. Tout comme le HTML, le JavaScript est généralement exécuté par le navigateur de l’internaute : on parle d’un comportement client-side, par opposition au server-side lorsque le code est exécuté par le serveur. La syntaxe du JavaScript Les instructions Les instructions…
Bootstrap avec sass
Pour transférer un site fait avec Bootstrap sur l’éditeur et utiliser SASS Télécharger Source files sur bootstrap ici Prendre dedans le dossier scss et le placer dans notre dossier WWW et le renommer: bootstrap-sass. Dans ce dossier renommer les fichiers, avec _ , ceux qui ne l’on pas(3 fichiers bootstrap…). Dans WWW créer un autre dossier scss et…