Animer avec jQuery - types easing et effets

Avec jQuery, on peut animer un site HTML similairement au Flash et le rendre très dynamique. Même si vous ne connaissez pas javascript comme un expert, avec l'aide de jQuery et quelques recherches sur le net, vous pouvez intégrer des scripts d'animation facilement.

Dans notre exemple on va faire défiler un objet sur la scène à l'ouverture du site, puis on rajoute un bouton avec lequel on peut animer des objets et à la fin on va faire tout disparaitre de la scène. L'exemple vient du site Zen It.

Lire la suite

Show - hide div avec jQuery

jqueryIl y a quelques années j'ai cherché une solution pour masquer des contenus, puis les afficher en défilant en douceur (smoothly) en cliquant sur un bouton sans quitter la page. J'ai trouvé une solution de masquage appelé "Peekaboo" (coup d'oeil ou coucou) avec Flash mais avec le temps passé, j'abandonne Flash à cause des problèmes cumulés. Enfin, jQuery a porté une solution très simple et ce javascript est très léger.

Je vous montre deux sortes de fonction : montrer/cacher les contenus individuellement ou montrer/cacher les contenus de tous les "div" en même temps.

Lire la suite

Comment intégrer jPreloader dans un blog WordPress

J'avais un problème avec jPreloader (le préchargeur), il ne voulait pas marcher dans la partie blog (ici) de mon site. J'utilise "Twentyeleven child theme" et la dernière version de WP (3.7.1 à l'époque).

J'ai fait trois changements qui ont résolu le problème, si quelqu'un a le même problème, j'espère mon explication va vous aider.

Lire la suite

Changer la couleur de la barre de défilement (scrollbar) ou personnaliser entièrement

Changer la couleur avec CSS

Attention ! Ces codes marchent seulement sous IE et Opera et certains d'eux ne fonctionneront qu'avec les versions de IE 8 ou inférieur (je n'ai pas testé !) parce qu'ils ne sont pas standard W3C, donc Mozilla par exemple ne prend pas en considération. La barre de défilement est une partie du navigateur et pas du site web.

Lire la suite

Sélecteur de couleurs en hexadécimal et en RGB (Color Picker)

Trouvez votre couleur en trois manières :

  • choisissez votre couleur en glissant votre souris dans le champ des couleurs et retrouvez le code en hexadécimal (code CSS de la couleur noire → #000000) ou en RGB (code CSS de la couleur noire sans transparence → rgba(0,0,0,1)).
  • tapez votre code de hexadécimal dans la rubrique après le #, la couleur recherchée sera visualisée dans le champ des couleurs et affichera les numéros RGB.
  • tapez les numéros RGB dans les trois rubriques appropriées ( R: ; G: ; B:), la couleur recherchée sera visualisée dans le champ des couleurs et affichera le code hexadécimal dans la rubrique après le #.

Lire la suite