Etirer une forme géométrique en Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Transformer des propriétés en Javascript

Avec les styles Css, nous avions appris à transformer plusieurs propriétés d'éléments Html pour créer des effets d'animation. Ici, nous allons voir que les mêmes résultats peuvent être atteints grâce au code Javascript.



Dans l'exemple illustré par la capture, lorsque l'utilisateur pointe avec la souris sur le rectangle à coins arrondis, celui-ci se transforme pour notamment gagner en volume. Ce sont en réalité plusieurs propriétés Css qui sont impactées, dont les couleurs de fond et de texte. Et ces transformations respectent un délai de quelques secondes avant de rejoindre l'état final. Certes, l'effet n'est pas des plus saisissants, mais l'intérêt ici est bien de voir comment influer sur des attributs Css avec le code Javascript.

Sources Html et Css
Pour la démonstration de cette astuce Javascript, nous proposons de récupérer des sources existantes.

• Télécharger le fichier compressé transformations-en-javascript.rar en cliquant sur ce lien,
• Puis, le décompresser dans le dossier de votre choix,

La décompression livre le fichier de la page Web (index.htm) accompagné de ses ressources dans les sous dossiers.

• Double cliquer sur le fichier index.htm pour l'exécuter dans le navigateur Web par défaut,

Le rectangle est bien présent. Mais à ce stade, si vous passez la souris sur sa forme, hormis l'aspect du pointeur de la souris qui change, rien ne se produit. Il s'agit de l'enjeu de ces démonstrations.

La construction Html
Il est donc temps de découvrir l'agencement de la page Html pour comprendre comment intervenir sur cette forme géométrique.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,

Nous accédons ainsi au code Html de la page Web. Le calque (div) qui retient notre attention est situé vers le bas de la page Html. Il est lui-même embarqué dans un calque parent portant l'identifiant auCentre.

...
<div id="conteneur">
<div id="contenu">
<!--
Implémentation
-->
<div id="auCentre">
<div id="changer">Survolez !</div>
</div>
</div>
</div>
...

Il accueille bien le texte du rectangle aux coins arrondis (Survolez !). De plus et c'est le fait le plus important, il est reconnu par l'identifiant changer. Un identifiant sert à piloter un élément Html par le code Javascript en le désignant précisément, mais pas seulement. Ici, cet identifiant est aussi utilisé pour réaliser des réglages Css qui donnent forme à ce rectangle. Et ce style Css est embarqué dans cette même page Web en haut du code Html, dans la section Style.

...
<style>
#changer
{
margin:auto;
margin-top:100px;
font-size:16px;
padding-top:12px;
padding-left:5px;
cursor:pointer;
width:100px;
height:50px;
background-color:#edeeee;
color:#2b579a;
border:#666 1px solid;
border-radius:10px;
transition: font-size 3s, color 2s, background-color 2s, width 3s, height 3s,padding 3s;
}
</style>
...

Des réglages classiques y sont opérés pour définir les dimensions, les attributs de police, les décalages, les bordures ainsi que les couleurs. Et ce sont ces attributs que nous devons transformer progressivement par le code Javascript. A ce titre, vous notez la présence du paramétrage opéré par le dernier attribut Css transition. Il indique sur quels délais doivent s'effectuer les changements pour la taille de la police (3s), la couleur du texte et celle d'arrière-plan (2s), mais aussi pour les dimensions (width et height) ainsi que les décalages internes du texte (padding) pour ajuster la position aux nouvelles dimensions.

Mais à ce stade, aucune animation et aucune règle (Keyframes) ne sont définies. Nous avions appris à dompter ces animations par les styles Css. Mais ici rappelons le, c'est le code Javascript qui doit influer sur ces réglages Css pour réaliser la transformation. Et grâce à l'attribut Css transition, les variations demandées en Javascript s'opèreront sur les délais définis.

Les gestionnaires d'événements
Pour débuter maintenant, il est question de déclarer deux gestionnaires d'événements en Javascript. Le premier doit observer le moment où la souris passe sur la forme d'identifiant changer. Le second doit observer le moment où la souris quitte la zone d'influence de cette forme. Ainsi, les codes Javascript associés pourront se déclencher pour opérer les transformations dans un sens comme dans l'autre.

Ces gestionnaires, nous avions appris à les initialiser au sein même de la balise Html de l'élément concerné. Mais nous allons le voir, il est aussi possible de les déclarer indépendamment grâce à l'identifiant du calque.

• Dans la section de script, en bas du code Html, déclarer les deux gestionnaires suivants :

...
<script type="text/javascript" language="javascript">
changer.onmousemove = function()
{

};

changer.onmouseleave = function()
{

};
</script>
...

Chaque gestionnaire est bien attaché au calque d'identifiant changer. Le premier détecte le passage de la souris (onmousemove). Le second détecte l'événement inverse, lorsque l'utilisateur sort la souris de la forme géométrique. Et tous deux sont affectés à une fonction. Ce sont elles que nous allons devoir implémenter pour définir quels réglages adopter lorsque ces événements sont détectés. La première doit modifier les attributs Css. La seconde doit les réinitialiser.

Transformer les attributs en Javascript
Dorénavant, pour réaliser ces transformations, nous devons exploiter les propriétés de l'élément Html afin de descendre dans la hiérarchie jusqu'aux attributs Css à régler. Nous savons pointer sur un objet Html précis grâce à la méthode Javascript getElementById. Mais comme nous sommes dans un gestionnaire qui concerne précisément cet élément, l'objet Javascript this permet de le désigner directement et plus simplement.

• Dans la fonction du premier gestionnaire, ajouter la ligne Javascript suivante :

...
changer.onmousemove = function()
{
this.style.fontSize = '36px';
};
...

Nous exploitons simplement la propriété style de l'élément Html pour descendre dans la hiérarchie jusqu'à ses attributs Css. Et avec l'attribut font-size, nous changeons la taille de la police que nous grossissons drastiquement.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Web,
• Rafraîchir la page Html avec la touche F5 du clavier,
• Puis, passer la souris sur la forme géométrique,

Comme vous pouvez le voir, la taille de la police grossit effectivement mais pas brutalement. Grâce à l'attribut transition du style changer associé au calque, elle rejoint sa taille finale progressivement, en respectant une durée de 3 secondes. Bien sûr à ce stade, cette transformation dénote puisque les autres attributs de la forme géométrique ne suivent pas encore le mouvement. De plus et bien entendu, lorsque vous sortez la souris de la forme, la nouvelle valeur de l'attribut reste figée. C'est le second gestionnaire qui doit se charger de recaler les valeurs initiales, là encore tout en respectant les délais définis.

En suivant exactement le même principe, nous devons maintenant influer sur les autres attributs Css.

• Revenir dans le code Html, entre les bornes de la fonction du premier gestionnaire,
• Après le réglage précédent, ajouter les instructions Javascript suivantes :

...
changer.onmousemove = function()
{
this.style.fontSize = '36px';
this.style.width = '300px';
this.style.height = '100px';
this.style.color = '#edeeee';
this.style.paddingTop = '20px';
this.style.backgroundColor = '#2b579a';
};
...

Grâce à la propriété style du calque Html, nous descendons respectivement jusqu'aux autres attributs Css à modifier comme la largeur et la hauteur (width et height) mais aussi comme les couleurs (color et backgroundColor) sans oublier l'ajustement du décalage (paddingTop) pour conserver le centrage du texte dans la hauteur du calque, malgré les variations des dimensions.

Remarque : Vous notez une différence de syntaxe dans l'appellation des attributs entre le code Css et le code Javascript. Lorsque le nom d'un attribut est composé, le Css exploite le tiret pour bien différencier les mots clés (background-color). Le Javascript quant à lui exploite la casse chameau ou Camel Case (backgroundColor).

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Web,
• Rafraîchir la page Html (F5),
• Puis, passer la souris sur la forme géométrique,

Comme vous pouvez l'apprécier, toutes les transformations s'opèrent simultanément en respectant les délais respectifs, jusqu'à atteindre les valeurs de propriétés dictées par le code Javascript.

Maintenant, il nous reste à programmer le comportement inverse lorsque la souris sort de la zone d'influence, pour que la forme géométrique recouvre progressivement son état d'origine. C'est donc le second gestionnaire que nous devons implémenter. Les lignes de code Javascript sont identiques, seules les valeurs d'affectation changent.

• Revenir dans le code de la page Html,
• Sélectionner les lignes de la fonction du premier gestionnaire et les copier (CTRL + C),
• Puis, les coller (CTRL + V) dans la fonction du second gestionnaire,
• Puis, adapter les valeurs des attributs comme suit :

...
changer.onmouseleave = function()
{
this.style.fontSize = '16px';
this.style.width = '100px';
this.style.height = '50px';
this.style.color = '#2b579a';
this.style.paddingTop = '12px';
this.style.backgroundColor = '#edeeee';
};
...

Si vous enregistrez les modifications et que vous testez la page Html après l'avoir rafraîchie, vous constatez avec plaisir que les transformations se jouent désormais dans les deux sens, selon que la souris entre ou quitte la zone d'influence de la forme géométrique. Et si vous réalisez des va-et-vient assez rapides, vous donnez l'illusion d'un effet élastique sur une forme qui s'étire puis se contracte en boucle.

Remarque : Nous aurions très bien pu jouer cette animation au clic en adaptant le premier gestionnaire (changer.onclick = function()).