Transformation CSS sur de multiples propriétés

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


Sujets que vous pourriez aussi aimer :


Transitions multiples avec les styles Css

Au travers des précédentes astuces, nous avons appris à réaliser des transformations et à jouer des animations avec les styles Css. Dans ce nouveau volet, nous allons apprendre à réaliser des effets plus complexes. Pourtant et nous le verrons, la mise en oeuvre est encore plus simple.



Dans l'exemple illustré par la capture, la photo se transforme totalement au survol de la souris. Ses dimensions d'origine sont assez petites et sa bordure est jaune. Dans sa position finale, elle est plus grande, elle est dotée d'une bordure bleue plus épaisse, ses angles sont totalement arrondis. Et cette transformation se joue sur un délai de 2 secondes. Bref, nous allons comprendre comment il est possible de métamorphoser toutes ces propriétés à la fois avec les effets de transitions en Css.

Structure de la page Html
Pour démontrer cette nouvelle astuce, nous devons récupérer des sources offrant une structure Html déjà avancée.

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

La décompression livre le fichier principal de la page Web. Il est nommé index.htm. Trois sous dossiers l'accompagnent. Nous reviendrons sur l'un d'entre eux en temps voulu.

• A la racine du dossier de décompression, double cliquer sur le fichier index.htm,

De cette manière, vous l'ouvrez dans le navigateur Web déclaré par défaut. La page Html propose un bouton et une image en son centre. Pour l'instant le bouton est inopérant. Si vous survolez l'image avec la souris, vous constatez qu'elle change complètement d'apparence. Toutes les propriétés que nous avons énumérées précédemment ont été transformées. Cela signifie que des styles Css régissent déjà son comportement. Mais cette transformation est brutale. Aucune transition n'a lieu. La métamorphose est instantanée. Et c'est tout l'enjeu de cette nouvelle découverte. Nous allons comprendre comment il est possible de maîtriser l'évolution d'une animation avec les styles Css.

Effet de transition
Avant de connaître la technique triviale permettant de maîtriser ces effets de transformation, nous devons nous emparer de la structure de la page Web.

• 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 affichons ainsi la structure et le code de la page Html. Les références aux styles Css sont établies en entête de cette page :

<link rel='stylesheet' href='css/mes-styles.css'>
<link rel='stylesheet' href='css/les-styles.css'>

Le fichier mes-styles.css est celui qui organise globalement la structure actuelle. Le fichier les-styles.css est celui que nous allons utiliser en complément pour régler ces effets de transition.

Plus bas dans le code Html, vous notez la présence du bouton et juste en-dessous, celle de l'image dans sa balise img.

...
<div id='contenu'>
<!--
Implémentation
-->
<input type='button' class='btnMenu' value='Transition' /><br />
<img src='images/photo1.jpg' alt='Photo prise au-dessus du village de Seillans dans le Var' id='limg'>
<div id='desc'>

</div>
...

Cette image est régie par le style limg (id='limg'). C'est lui qui décide de l'apparence de la photo au début et à la fin de la transformation. Pour le constater, nous devons accéder à ce fichier de styles.

• A la racine du dossier de décompression, double cliquer sur le dossier Css pour l'ouvrir,
• Cliquer alors avec le bouton droit de la souris sur le fichier les-styles.css,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

Trois styles sont déjà présents. Seuls les deux derniers nous intéressent puisqu'ils concernent le comportement de la photo :

#limg
{
margin-top:35px;
background-color:#d1ae42;
padding:3px;
width:300px;
height:169px;
}

#limg:hover {
background-color:#2b579a;
padding:6px;
width:600px;
height:338px;
border-radius:50%;
box-shadow:15px 15px #bfbfbf;
}

Il s'agit du style limg et de son style dérivé limg:hover. Le premier définit tous les attributs de l'image au départ comme sa largeur, sa hauteur et sa bordure générée par la combinaison du background-color et du padding. Le second définit les attributs de cette image après qu'elle ait été survolée par la souris, en témoigne son gestionnaire d'événement (hover) en suffixe. Et le moins que l'on puisse dire est que ses propriétés sont largement bouleversées. Ses dimensions sont augmentées, la couleur de fond pour la bordure est modifiée, la dimension du décalage (padding) pour l'épaisseur de bordure est augmentée, un effet d'arrondi est appliqué (border-radius) et une ombre portée (box-shadow) est ajoutée. Mais comme nous avons pu le voir, en l'état la transformation est instantanée. Or nous souhaitons que cet effet se décompose dans le temps, sur 2 secondes par exemple. Pour cela, nous allons devoir gérer cet effet de transition par les attributs Css.

• Avant l'accolade fermante du style limg, ajouter l'instruction Css suivante :

#limg
{
margin-top:35px;
background-color:#d1ae42;
padding:3px;
width:300px;
height:169px;
transition:all 2s;
}

C'est l'attribut transition qui dicte comment doit s'opérer la transformation des propriétés entre le premier et le second style, au survol de la souris. Le paramètre all indique que toutes les propriétés listées sont concernées par la transformation. Nous pourrions aussi nous contenter d'en énumérer seulement certaines. Le deuxième paramètre est fixé à 2s. Il précise que la transition doit s'opérer sur une durée de 2 secondes.

• Enregistrer les modifications (CTRL + S),
• Revenir sur le navigateur Web,
• Rafraichir la page avec le raccourci CTRL + F5 pour actualiser le cache,
• Puis, survoler l'image à l'aide de la souris,

Comme vous pouvez le voir, cette fois la transformation prend le temps de se jouer pour rejoindre les attributs fixés par le style limg:hover. Et précisément, dans ce dernier style, vous pouvez modifier certaines valeurs de propriétés comme les dimensions, l'ombre ou la couleurde bordure pour constater que l'effet de transformation réagit parfaitement lorsque vous réactualisez la page. De même, dans le premier style, vous pouvez modifier le temps pour jouer plus ou moins rapidement l'animation.



Gérer la transition en Javascript
Nous allons le voir, il est tout à fait possible de définir ces attributs de transition a posteriori par le code Javascript. L'intérêt pourrait par exemple consister à déclencher l'animation non plus au survol mais au clic de la souris. Ici, le principe est de considérer une image à transformer sans effet de transition. Mais un clic sur le bouton situé juste au-dessus doit lui appliquer ces valeurs. Dès lors la transformation doit respecter la transition. Au travers de cette technique, nous pourrions donc construire des listes déroulantes permettant à l'utilisateur de choisir des paramètres dynamiques pour les appliquer et déclencher des animations différentes au gré des envies.

• Revenir dans l'éditeur Notepad++ sur le fichier les-styles.css,
• Supprimer la ligne de la transition (transition:all 2s) dans le style limg,
• Puis, enregistrer les modifications (CTRL + S),

Désormais, si vous rafraîchissez la page Web et que vous survolez l'image, vous retrouvez l'état d'origine. La transformation est instantanée, sans aucune temporisation.

• Revenir sur l'éditeur Notepad++ dans le code de la page index.htm cette fois,
• Dans la section de script en bas de cette dernière, ajouter le code Javascript suivant :

<script type='text/javascript' language='javascript'>
function jouerTransition()
{
document.getElementById('limg').style.transition = 'all 2s';
}
</script>

Très simplement, nous créons la fonction jouerTransition. Grâce à la méthode getElementById de l'objet document, nous pointons sur l'image reconnue par son identifiant : limg. Nous accédons à ses attributs de style grâce à la propriété style. Dès lors, nous exploitons la propriété dérivée transition pour paramétrer de nouveau l'effet de transformation selon les mêmes réglages que précédemment.

Mais pour être jouée, une fonction doit être appelée. C'est la vocation du bouton situé au-dessus de l'image dans le code Html.

• Plus haut dans le code, ajouter le gestionnaire d'événement suivant au bouton :

...
<input type='button' class='btnMenu' value='Transition' onclick='jouerTransition()'/><br />
<img src='images/photo1.jpg' alt='Photo prise au-dessus du village de Seillans dans le Var' id='limg'>
<div id='desc'>
...

Il parle de lui-même. Au clic sur le bouton, la fonction jouerTransition doit être appelée.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Rafraîchir la page avec le raccourci clavier CTRL + F5,

Au survol de l'image, rien n'a changé pour l'instant. La transition est brusque.

• Cliquer sur le bouton et survoler de nouveau l'image,

Comme vous pouvez le voir, les paramètres de transition lui ont été conférés dynamiquement par le code Javascript. La transformation se déroule de nouveau sur une durée de 2 secondes pour toutes les propriétés concernées.