Une Librairie Javascript d'Effets pas comme les autres

Afin d'améliorer sa rapidité de développement, le BlogDuWebdesign vous met à disponibilité gratuitement sa Librairie Javascript d'Effets personnels

Qui aujourd'hui n'utilise pas du Javascript sur son site web afin d'améliorer la navigation de ses visiteurs ou pour en mettre plein la vue ?

Devant la recrudescence des Librairies Javascript qui rivalisent de créativité, de qualité et de possibilités on finit par ne plus savoir quoi faire mais vous êtes-vous déjà demandé si la librairie que vous allez utiliser est adaptée à votre site/projet ?

Lequel d'entre vous utilise l'intégralité des fonctions de la librairie Javascript jQuery sur un même et unique projet ? Après quelques analyses j'en ai conclu que pour la plupart des développeurs/bloggeurs du web, on ne se sert grand maximum que de quelques fonctions et encore si ce n'est pas juste d'une seule (Le fameux Slide-In/Toggle).

Alors dans ce cas où allons-nous ? jQuery voit sa librairie toujours plus conséquente en poids (70ko en compressé et ils essaient de camoufler le poids avec les méthodes de transfert gZip des serveurs...) et personnellement utiliser cette librarie pour le peu de nécessité que je vais en avoir me rechigne particulièrement. C'est pourquoi j'ai développé pour la suite des projets du BlogDuWebdesign une librairie Javascript certe moins puissante et peut être un peu plus buggée (xD) mais qui au final a de quoi proposer un petit pannel d'options assez sympathiques que je vais vous présenter.

Tout d'abord, son poids: 5ko en compressé (12ko non compressé), et oui c'est quasiment 15 fois plus léger que jQuery^^

Cette librairie est agrémentée des fonctions d'effets les plus basiques et qui peuvent être mixées entre elles afin de donner de nouveaux effets plus travaillés.

Voici les liens de téléchargements de la librairie:

La version Compressée (5ko): Télécharger Ici

La version de Développement, Non Compressée (12ko): Télécharger Ici

Démonstration

La fonction Dégradé: function degrad(element, action, delay, speed)

Elle permet d'afficher et de cacher un element en dégradé progressif. Les possibilités de développement son diverses comme vous pouvez le constater avec l'exemple ci-dessous. Un délai peut être inclu en paramètre afin de donner un effet de cascade de disparition. Il faut toutefois signaler que le changement de transparence fait disparaître visuellement le contenu mais le ne cache pas, c'est-à-dire que la disposition des éléments en-dessous n'en est pas affectée (Les éléments ne remontent pas pour combler l'espace créé par la disparition des éléments). En résumé l'appel de la fonction demande 4 paramètres:

- element: C'est l'id de l'élément à faire disparaître

- action: Ce qu'il faut effectuer, show pour montrer l'élément (caché) ou hide pour cacher un élément visible. Il est possible de compiler une succession d'événements, par exemple si vous mettez hide_show l'élément est caché puis immédiatement raffiché et inversement si vous mettez show_hide

- delay: Le délai (en milisecondes) avant le commencement de l'effet, fort utile pour un effet de cascade. Si vous voulez que l'effet soit immédiatement appliqué mettez la valeur 0

- speed: La vitesse du dégradé, personnellement je mets 10 mais vous pouvez tester d'autres valeurs afinde trouver celle qui vous convient

Transparence, pas de délai Transparence, délai de 100ms Transparence, délai de 200ms

La fonction Changement de Dimensions: function setsize(element, width, height, speed)

Je n'ai en soit pas trouvé d'utilisation personnelle à cette fonction mais j'ai préféré l'intégrer car simple à coder. 4 paramètre sont nécessaires:

- element: id de l'élement à modifier

- width: La nouvelle longueur de l'élément (exemple: 500,  ne pas mettre l'unité) en pixels, si vous voulez laisser la longueur par défaut sans avoir à specfier de taille ne pixel, mettez same en paramètre

- height: La nouvelle hauteur de l'élément (exemple: 300, ne pas mettre l'unité) en pixels, si vous voulez laisser la longueur par défaut sans avoir à specfier de taille ne pixel, mettez same en paramètre

- speed: La vitesse de l'effet, je la met généralement autour de 20

Size - Begin with a width of 500px and a height of 40px

La fonction Slide/Toggle: function slider(element, incre)

Utile et sympathique pour des effets appliqués sur de petits éléments (textuels, DIV, etc.). C'est une copie (Je sous entends copie par immitation) de la fonction Toggle de jQuery car je la trouve quasi obligatoire pour n'importe quel type de librairie d'effets. La fonction a été codé de telle façon à ce que le minimum de paramètres soit nécessaire ce qui au final vous permet à partir d'un même boutton d'appel de cacher puis d'afficher un élément. 2 paramètres sont requis:

- element: id de l'élement

- incre: Vitesse de l'effet, je la mets principalement à 4

Le slide/Toggle gère et garde en mémoire les margin top et bottom ainsi que les padding top et bottom afin de restituer l'élément tel qu'il était lorsque l'on demande sa réapparition

La fonction Scroll: function scroll_to(posi,incre)

Permet de faire défiler verticalement la fenêtre du navigateur jusqu'à une position désirée. Le déplacement vertical de haut en bas et de bas en haut est géré. 2 paramètres:

- posi: La position verticale en pixel (Sans l'unité à la fin, par exemple: 100) vers laquelle doit scroller la fenêtre du navigateur. Vous pouvez spécifier à la place l'id d'un élément afin de positionner la fenetre directement dessus.

- incre: La vitesse du scroll, je la fixe à 50 généralement pour de petits scrolls (Si vous voulez proposer un boutton 'Revenir en Haut de Page' avec cette fonction, pensez à mettre une vitesse plus rapide dans le cas où la hauteur de votre page serait conséquente, pour cette situation, posi serait égal à 0, marquant le haut de page).

La fonction Background Color: function switch_color(element,r_ori,v_ori,b_ori,r_next,v_next,b_next,option,speed)

Effet à exploiter sur vos bouttons, champs de formulaires, etc car une fois bien configuré vous pouvez effectuer de très bons rendus. Cette fonction est peut être compliquée à première approche de part les nombreux paramètres à spécifier (9 au total):

- element: id de l'élément à modifier

- r_ori, v_ori, b_ori: La couleur RVB de base du background de votre élément, vous pouvez l'obtenir sous Photoshop à côté de la valeur hexadécimale.

- r_next, v_next, b_next: La couleur RVB finale du background après l'effet.

- option: Laissez vide pour effectuer le changement de background vers la couleur finale. Mettez back pour que l'effet aille vers la couleur finale puis une fois atteinte revienne sur sa couleur de background de départ spécifiée à l'aide des paramètres r_ori, v_ori, b_ori.

- speed: La rapidité de l'effet, je la mets à 12.

En plus, je me suis permis d'ajouter quelques autres fonctions non visuelles mais utiles telles que:

function file(fichier): Permet d'appeler en requête HTTP une page web située sur votre serveur et en retourne son contenu. Vous pouvez ensuite afficher ce contenu dynamiquement dans une DIV par exemple où le manipuler.

function convToHex(r,v,b): Retourne la convertion des 3 paramètres d'une couleur RVB et une couleur Hexadécimale (Exemple: convToHex(255,0,0) retourne #ff0000).

function g(id): Ce n'est rien d'autre qu'une simplification de l'appel de la méthode: document.getElementById(id), elle permet d'alléger le code et d'éviter que celui-ci soit rébarbatif à taper. Je vous la signale au cas où vous nommeriez une fonction du même nom pour une autre utilisation ce qui ferait un conflit et générerait des bugs.

En espérant que cette librairie vous servira pour vos projets, je reste néanmoins à votre entière disponibilité pour tout signalement de bug, question concernant son utilisation, etc.

Voici les liens de téléchargements de la librairie:

La version Compressée (5ko): Télécharger Ici

La version de Développement, Non Compressée (12ko): Télécharger Ici