Changement progressif de la couleur de fond (bg-color) d’un élement par jquery

A partir d’un script Jquery, nous allons animer la couleur du fond d’un élément html en lui associant une palette de couleur qu’on va boucler.
Normalement ca devrait marcher sans problème sur tous les supports bureau, tablette, et même sur les Smartphones.

Déclarer les Javascripts

On aura besoin de jquery, jquery UI et de animated_bg.js que pourrez télécharger avec le démo ici , afin de l’inclure dans votre page.

Ajout de la classe animated_bg sur l’élément HTML

Il suffit d’ajouter la classe animated_bg sur l’élément que vous voulez animer la couleur de fond.
Normalement, il devrait marcher sur n’importe quel élément html ( div, p, span, élement de formulaire…)

Initialisation de l’animation

On devrait définir ci-dessous les couleurs à utiliser et la vitesse de l’animation.
Dans l’exemple qu’on va utiliser on a définira .animated_bg2 et .animated_bg3 afin de montrer les différentes couleurs et les variations de la vitesse. Vous pourrez ajouter autant de couleurs que vous voulez.

Adapter le CSS

Afin de prévenir le cas échéant où le JavaScript échoue, on va mettre en place un background color en css identique à la première couleur défini dans l’initialisation du javascript.

Répondre