♪
L'objectif - Un menu animé▲
Voici une démo du résultat final.
Introduction - Une explication du terme easing▲
Notre menu est animé de façon particulièrement fluide grâce à un procédé appelé easing. La définition du site Adobe Flash Developer Center est assez complète :
|
“The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.” |
|---|
|
« Le terme »easing« se rapporte à l'accélération ou la décélération graduelle, durant une animation, qui permet de rendre vos animations plus réalistes. Easing crée une accélération ou une décélération d'apparence plus naturelle en ajustant graduellement le taux de modification. » |
Merci pour la qualité du plugin jQuery Easing, qui permet de créer de telles animations sans passer par les environnements Flash et Actionscript.
Étape 1 - Mettre en place la structure▲
Avant de commencer à utiliser jQuery, nous devons créer la structure XHTML du menu et la placer dans les fichiers de notre projet. Créer de nouveaux documents XHTML, CSS et JavaScript. J'ai choisi de nommer mes fichiers « animated-menu ». Créer deux dossiers pour les images et les scripts à la racine. Voici la structure de notre exemple :
Rien d'extraordinaire dans cette structure. Commencez par charger les fichiers nécessaires dans l'en-tête de la page, entre les balises head. J'ai choisi de charger jQuery depuis la page Google code en ligne, alors que le plugin easing est placé dans le dossier 'js'.
L'ordre d'appel des scripts est important !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Menu animé fluide avec jQuery</title>
<link type="text/css" rel="stylesheet" href="animated-menu.css"/>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="animated-menu.js" type="text/javascript"></script>
</head>Ensuite, copiez la structure du menu dans le corps de la page entre les balises body :
<body>
<p>Survolez le menu pour le voir s'animer.</p>
<ul>
<li class="green">
<p><a href="#">Accueil</a></p>
<p class="subtext">Accueil du site</p>
</li>
<li class="yellow">
<p><a href="#">A propos</a></p>
<p class="subtext">Plus d'infos</p>
</li>
<li class="red">
<p><a href="http://www.developpez.com/">Site</a></p>
<p class="subtext">Visitez developpez</p>
</li>
<li class="blue">
<p><a href="http://www.developpez.net/forums/f1188/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/">Forum</a></p>
<p class="subtext">jQuery sur developpez</p>
</li>
<li class="purple">
<p><a href="../">Retour</a></p>
<p class="subtext">Retour à l'article.</p>
</li>
</ul>
</body>
</html>Les éléments du menu ont des classes CSS désignant la couleur du bloc. Dans chaque bloc de menu, nous trouvons un titre et un sous-titre qui sera masqué par défaut.
Étape 2 - Les styles CSS▲
Maintenant que la structure du menu est en place, nous allons ajouter des styles de base pour l'embellir et le disposer horizontalement. Chaque élément de la liste doit avoir la propriété overflow fixée à hidden, afin que les sous-titres ne soient pas visibles tant que la hauteur ne sera pas ajustée.
body{
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
}
ul{
margin:0;
padding:0;
}
li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
a{
color:#FFF;
text-decoration:none;
}
p{
padding:0px 5px;
}
.subtext{
padding-top:15px;
}
/*Classes des couleurs du menu*/
.green{
background:#6AA63B;
}
.yellow{
background:#FBC700;
}
.red{
background:#D52100;
}
.purple{
background:#5122B4;
}
.blue{
background:#0292C0;
}Étape 3 - Animer avec jQuery▲
Tout notre code jQuery sera dans le fichier JavaScript animated-menu.js créé précédemment.
$(document).ready(function(){
//Lorsque la souris survole un lien
$("li").mouseover(function(){
$(this).stop().animate(
{height: '150px'},
{queue: false,
duration: 600,
easing: 'easeOutBounce'
})
});
//Lorsque la souris quitte le lien
$("li").mouseout(function(){
$(this).stop().animate(
{height: '50px'},
{queue: false,
duration: 600,
easing: 'easeOutBounce'
})
});
});Il y a deux actions dans le code précédent. Lorsque la souris survole un élément du menu, cet élément commence à s'animer en s'agrandissant à 150px sur une durée de 0.6 seconde. L'effet easing appliqué est 'easeOutBounce', qui fait rebondir légèrement le bloc à la fin de l'animation (« out »). Lorsque la souris sort du menu, l'élément reprend sa taille d'origine.
Si vous utilisez ce menu dans le contexte d'un site plus grand, vous pouvez juste remplacer les éléments sélectionnés pour l'animation (ici, juste les éléments HTML <li>) par ceux que vous souhaitez (voir ce tutoriel sur la sélection d'éléments avec jQuery).
La méthode stop() est appelée avant le début de l'animation pour éviter des boucles répétées si la souris entre et sort rapidement du menu. Plus de précisions dans cet article pour empêcher les répétitions d'animations.
Étape 4 - Ajouter votre touche personnelle▲
J'ai ajouté des images de fond dans les exemples pour vous montrer une possibilité de personnalisation et de design. Il existe de nombreuses façons pour créer des menus originaux. À vous d'user de votre imagination pour réaliser celui qui vous correspond. N'hésitez surtout pas à nous faire découvrir vos créations !
Démo et téléchargement▲
Vous pouvez voir un exemple en ligne.
Téléchargez l'archive de l'exemple.
Remerciements▲
Un grand merci à Kerod pour sa relecture avisée et ses conseils précieux !