Gloubi tuto – texte changeant de couleur

Cette fois-ci encore, j’ai décidé de m’attaquer à un autre gloubi script d’effet sur texte, le texte changeant de couleur.

Une fois de plus, dû à l’évolution des technologies, plus besoin de JavaScript pour obtenir un résultat identique (ou en tout cas très proche).

Fonctionnement du script

On indique au script les couleurs (du texte et du fond) entre lesquelles faire une transition. Ces couleurs sont définies chacune par trois variables (ce qui nous fait 12 variables en tout) contenant une valeur décimale (entre 0 et 255) qui sera ensuite convertie en hexadécimal sur deux digits (entre 00 et FF) pour indiquer la couleur sous la notation #RRGGBB.

Les valeurs des différentes composantes sont progressivement incrémentées puis décrémentées entre les valeurs bornes.

Continuer la lecture

Gloubi tuto – menu avec images réactives

Nouvelle semaine, nouveau gloubi-tuto. Cette fois-ci, on s’attaque à un autre script de menu. M’enfin script… pas cette-fois. Même si sur gloubiweb cela est présenté comme un script, il s’agit en fait de CSS.

Ce menu, qui est visible sur cette page, utilise la technique des sprites CSS.

Présentation de la technique des sprites

Cette technique consiste à ne montrer qu’une petite partie d’une image plus grande, qui contient plusieurs éléments graphiques de notre mise en page, dans notre cas, tous les états des boutons de notre menu.

Pour ne montrer qu’une partie de cette image plusieurs techniques sont possibles : image dans un conteneur plus petit qui masque tout ce qui est en dehors (propriété overflow : hidden) ou encore l’utilisation de la grande image comme image de fond d’un conteneur plus petit, positionnée de manière à ne laisser voir que la partie qui nous intéresse.

C’est cette deuxième technique qui utilisée ici, en modifiant la position de l’image de fond au survol de la souris.

Le fait que l’image de fond change de position au survol de la souris est visible sur la page originale, car les liens sont légèrement surdimensionnés et laissent voir plus qu’un seul et unique « bouton ».

Continuer la lecture

Gloubi script – texte avec un arrière-plan défilant

Aujourd’hui nouveau tuto sur un gloubi script d’effet sur texte. Cette fois ci, il s’agit de texte avec arrière-plan défilant.

Principe du script

Le script original est disponible sur sa propre page sur le site de notre gloubi adversaire.

Il fonctionne selon le principe de calques : au-dessus du calque de motif, on place un autre calque où le texte fait des « trous », laissant voir ce que l’on place dessous (ici notre calque de motif).

Le calque de motif est plus grand que le calque supérieur, mais on masque ce qui est en dehors de la zone du calque supérieur. Ce calque de motif est ensuite déplacé par du code JS.

Continuer la lecture

Le retour du compteur de caractères

Après être revenu dernièrement sur ma série de tutos d’introduction aux canvas, j’ai décidé de m’attaquer à l’un de mes anciens articles me valant le plus d’affichage sur le moteur de recherche d’Alphabet : le compteur de caractères.

Comme pour mes derniers articles traitant de JavaScript, une fois de plus je n’utiliserai que des fonctions natives, sans aucune librairie.

Organisation du nouveau code

Le nouveau code sera réparti dans deux fonctions : une fonction d’initialisation, et la fonction en charge du compte des caractères. Cette dernière fonction étant appelée une fois à l’initialisation, pour pouvoir être utilisable sur une page où les champs de formulaire contiennent déjà du texte (une amélioration par rapport à l’ancien code), et ensuite attachée à un événement sur les champs.

Un des gros changement est la manière dont on va passer les paramètres à notre champ compteur de caractères : au lieu de passer ces paramètres à notre fonction d’initialisation, on va utiliser des attributs HTML.

Continuer la lecture