Petit tuto pour rappeler la technique js css pour qu’au clic sur un bouton radio, un champ apparaisse en dessous : Ici je montre deux input radio :si je clique sur l’id ‘autre’, un input apparait juste en dessous, et si je clique sur l’autre input radio, le champs se referme, et j’efface les données. […]
Dans cet exemple, on applique une classe directement à l’image, pour en faire image full screen avec une position absolute, top:0 et left:0; Puis on applique une animation avec ‘scale » et une valeur de départ, ici 1 soit 100% et une valeur d’arrivée à 1.1. On crée une classe supplémentaire qui sera appliquée à notre […]
Ideal pour un site onepage où plusieurs sections se succèdent avec chacune des gros titres ,des sous-titres ou des images à la une, le plugin scrollReveal.js permet de faire apparaitre ses titres , div ou autre élément avec des effets multiples (de gauche à droite, bas en haut etc..).Comme son nom l’indique, l’animation s’execute […]
Il y a plétore d’exemples sur le net pour centrer un élément, soit en pur css soit avec du jquery. Voici une solution de chaque, qui a le mérite de fonctionner: On crée la fonction center, que l’on applique ensuite au éléments que l’on souhaite centrer par rapport à la fenetre. Plus simple et voire […]
Voici une fonction jquery pour pouvoir selectionner, deselectionner un bouton radio: See the Pen OVWxLZ by yuyazz (@yuyazz) on CodePen.
On va partir d’une image: Sur un site, j’ai un bouton ‘je veux en savoir plus sur cette offre » qui traine quelque part en bas de la page.Le but, comme sur l’image ci dessus est de placer cet bouton en position fixe, pour qu’il apparaisse des l’ouverture de la page, en bas de l’écran et […]
Voici le rendu final de ce petit tuto See the Pen bounceBubbles(); by yuyazz (@yuyazz) on CodePen. On définit une string dans une variable.On définit un set de couleurs, la foncion drawName prend en paramètre la string a dessiner et les couleurs, et la fonction bounceBubbles() permet l’animation sur le mot.Pour que le […]
See the Pen codeacademy menu by yuyazz (@yuyazz) on CodePen. Le principe est ici très simple;On place notre menu par défaut à left -285px, il est donc invisible. Avec l’element jQuery animate, on cible la div du menu et le body et au clic sur l’icone de menu on décale le tout de 285px […]
Voici un slider jquery tiré des cours en ligne Code Academy.Ca me permet d’avoir le code à portée de clavier, sans avoir à refaire l’exercice. See the Pen codeacademy slider by yuyazz (@yuyazz) on CodePen. Une première fonction pour activer le dropdown menu au click Une deuxième fonction pour le slider, un premier bloc […]
Petit exo, essayer de reproduire a l’aide de jquery l’accordéon suivant :(cliquer sur ‘edit on CodePen’ pour voir en grand) See the Pen jquery accordeon by yuyazz (@yuyazz) on CodePen.