♪
Le but - Un paysage de dessin animé▲
Avant de commencer, regardons un peu le résultat souhaité. Il s'agit d'un paysage de dessin animé avec des éléments glissants qui font apparaitre du contenu supplémentaire. L'image suivante vous montre le résultat avec tout le contenu visible.
Étape 1 - Organiser vos fichiers▲
Pour que l'on parle bien des mêmes choses, voici un aperçu de la structure de mes fichiers :
Comme vous pouvez le constater, vous aurez besoin de trois fichiers principaux pour respectivement, le CSS, le code jQuery et le XHTML. Le but est d'avoir une structure de fichiers la plus simple possible.
Vous devrez aussi avoir un dossier pour le JavaScript et un autre pour les images. Vous pouvez télécharger un fichier ZIP des images utilisées dans le tutoriel.
Pour ceux qui seraient intéressés, le logo RSS vient d'un tutoriel de Photoshop Star, l'image de fond avec les rayons vient de myPhotoshopLink (site désormais disparu) et les autres images ont été dessinées pour ce tutoriel avec l'outil crayon de Photoshop.
Concernant IE6
Les images de ce tutoriel utilisent le format PNG pour sa gestion de la transparence.
Mais IE6 gère mal ce format, vous pourrez trouver des solutions dans ce tutoriel.
Étape 2 - Intégrer les plugins▲
Ce projet utilise deux plugins jQuery. Vous devrez télécharger les deux et les placer dans le répertoire js.
Le premier est jQuery Easing Plugin. Si vous vous souvenez de ce tutoriel, il permet de créer des animations fluides. Ici, il servira pour faire apparaitre ou disparaitre les éléments cachés.
Le second est jQuery Delay plugin d'EvanBot. Très simple à utiliser, il permet de prévoir des délais entre les appels de fonctions. Dans notre cas, il sera utilisé pour coordonner les animations après un bref délai.
Étape 3 - Créer la structure XHTML▲
Voici le code XHTML :
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Créer un paysage d'en-tête animé avec jQuery</title>
<link rel="stylesheet" type="text/css" href="landscape-header.css"/>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.delay.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="landscape-header.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<img class="foreground" src="images/foreground-land.png" alt="Bienvenue au village"/>
<div id="titlebar">
<h1>Bienvenue</h1>
</div>
<div id="sliders">
<div class="village">
<div class="village-padding">
<h2>En-tête caché</h2>
<p>ac ultricies ante. ultricies egestas Pellentesque Aenean et Vestibulum fames quam vitae, amet, libero leo.
morbi malesuada eleifend tempor turpis sit et amet tristique placerat feugiat tortor Mauris senectus eu mi habitant
Donec quam, eget, semper. egestas. est. netus vitae sit </p>
</div>
</div>
<div class="cloudbar">
<div class="cloud-padding">
<h2>Souscrire via RSS</h2>
<a href="http://javascript.developpez.com/rss.php"><img src="images/feed-icon.gif" alt="Souscrivez maintenant !"/></a>
</div>
</div>
</div>
</div>
<div id="content">
<h2>Attention !</h2>
<p>Il y a des options ! <a href="#" class="toggle">Modifiez</a> le contenu visible.</p>
</div>
</div>
</body>
</html>Notez l'ordre dans lequel sont appelés les scripts jQuery. D'abord la librairie puis les plugins et votre code en dernier. Essayez de garder cet ordre pour éviter les désagréments. Faites aussi attention de charger le fichier CSS avant le JavaScript !
L'environnement est plutôt simple. L'en-tête contient la montagne en image de fond, le texte de bienvenue et les éléments coulissants. La zone de contenu se trouve directement sous l'en-tête et l'animation n'a pas d'effet sur elle. Dans ce tutoriel, elle contiendra le lien pour lancer l'animation.
Étape 4 - Les styles CSS▲
Copiez ce code dans votre fichier CSS. Je le commenterai ensuite.
@charset "iso-8859-1";
/* CSS Document */
*{
border:none;
}
body{
background:#7cc5da;
margin:0;
padding:0;
}
#wrapper{
width:960px;
margin:0 auto;
height:800px;
background:#3b902f;
}
#header{
height:500px;
width:960px;
background:url('images/sky-bg.jpg') no-repeat top left;
position:relative;
overflow:hidden;
}
#header .foreground{
position:absolute;
top:350px;
z-index:100;
}
sliders{
overflow:hidden;
}
#sliders>*{
display:none;
}
#titlebar{
position:relative;
z-index:0;
top:100px;
text-align:center;
}
#titlebar h1{
font-family:arial,sans-serif;
color:#37626F;
padding:10px;
font-size:70px;
letter-spacing:-2px;
}
.village{
position:absolute;
top:366px;
left:30px;
z-index:90;
height:500px;
width:470px;
background:url('images/village-background.png') no-repeat top center;
}
.village-padding{
padding:120px 25px 20px 25px;
}
.village-padding p{
color:#F7F7F7;
font-family:"Lucida Grande",arial, sans-serif;
font-size:13px;
line-height:1.6em;
}
.village-padding h2{
color:#FFF;
font-family:arial, sans-serif;
font-size:26px;
margin:0;
padding:0;
letter-spacing:-2px;
}
.cloudbar{
position:absolute;
top:-465px;
left:600px;
z-index:90;
height:325px;
width:252px;
background:url('images/cloud-bar.png') no-repeat bottom center;
}
.cloud-padding{
padding:20px;
text-align:center;
}
.cloud-padding p{
color:#F7F7F7;
font-family:"Lucida Grande",arial, sans-serif;
font-size:13px;
line-height:1.6em;
}
.cloud-padding h2{
margin:0px 0px 25px 0px;
padding:0;
color:#37626F;
font-family:arial, sans-serif;
font-size:26px;
letter-spacing:-2px;
}
#content{
text-align:center;
padding:10px;
}
#content h2{
color:#FFF;
font-family:arial, sans-serif;
font-size:26px;
letter-spacing:-1px;
}
#content p{
color:#FFF;
font-family:"Lucida Grande",arial, sans-serif;
font-size:13px;
}
#content a{
color:#FFED2F;
text-decoration:none;
}L'essentiel des styles s'appliquent à la police et au positionnement, cependant, il y a quelques points importants à noter :
- Afin de pouvoir bouger un élément avec la fonction jQuery animate(), sa propriété position doit être changée préalablement. J'ai choisi la position relative car elle est plus souple que absolute.
- Les différentes valeurs de z-index permettent d'empiler les éléments. Ici, l'élément le plus en avant est le paysage. Comme il s'agit d'un format PNG avec transparence, les autres éléments seront visibles malgré les courbes.
- On attribue aux éléments cachés un display: none par défaut et seront rendus visibles dès le début à l'appel de l'événement jQuery ready. Ainsi, l'ensemble de la page sera visible quand ces éléments apparaitront. Sans cela, la colonne du village risquerait d'être visible avant le reste du paysage.
- Les valeurs initiales des positions des deux colonnes de contenu (.village et .cloudbar) les mettent en dehors de la partie visible de la page. jQuery se charge ensuite de les repositionner.
Étape 5 - Les animations et transitions avec jQuery▲
Le code jQuery suivant permet d'animer tous les éléments déjà mis en place harmonieusement.
// JavaScript Document
$(document).ready(function(){
$buildingup = false;
$("#sliders>*").show();
//Blurs all links when clicked
$("a").click(function(){
$(this).blur();
});
$(this).delay(2000,function(){
$("#titlebar").fadeOut(1000);
});
$(this).delay(3500,function(){
//Show the elements
$(".village").stop().animate({top:'30px'}, {queue:false, duration:2000, easing: 'easeInOutBack'});
$(".cloudbar").stop().animate({top:'0px'}, {queue:false, duration:2000, easing: 'easeInOutBack'});
$buildingup = true;
});
$("a.toggle").click(function(){
if ($buildingup == false){
$("#titlebar").fadeOut(1000);
$(this).delay(1000,function(){
$(".village").stop().animate({top:'30px'}, {queue:false, duration:2000, easing: 'easeInOutBack'});
$(".cloudbar").stop().animate({top:'0px'}, {queue:false, duration:2000, easing: 'easeInOutBack'});
$buildingup = true;
});
}else{
$(".village").stop().animate({top:'366px'}, {queue:false, duration:2000, easing: 'easeInOutBack'});
$(".cloudbar").stop().animate({top:'-465px'}, {queue:false, duration:2000, easing: 'easeInOutBack'});
$buildingup = false;
$(this).delay(2000,function(){
$("#titlebar").fadeIn(1000);
});
}
});
});Souvenez-vous que cet en-tête a deux états possibles :
- Le premier affiche un message de bienvenue au centre avec le paysage derrière. Le texte apparait ou disparait progressivement.
- Le second affiche une colonne avec le village à gauche et une autre colonne descendante à droite. Les deux s'animeront en utilisant easings.
Le plugin delay est utilisé pour retarder de 3.5 secondes à partir du chargement de la page. Cela permet à l'utilisateur de voir le message de bienvenue avant la transition.
Le booléen "buildingup" permet de savoir si les colonnes sont visibles (true) ou cachées (false). Une condition if est lancée au début de l'animation pour vérifier la visibilité des éléments et appliquer l'animation adaptée.
Conclusion - À vous de jouer !▲
Aussi beau que puisse être le village, son utilisation est très spécifique et ne s'adaptera surement pas à tous les besoins. Le point important est l'utilisation des z-index pour créer des piles de calques et jQuery pour animer le tout.
Il y a beaucoup de points à aborder dans ce tutoriel et j'ai probablement oublié des choses importantes. N'hésitez pas à me faire part de vos demandes. Dites-moi ce qui permettrait d'améliorer la compréhension et je serai heureux d'apporter une réponse.
Enfin, si vous créez de superbes pages grâce à ce tutoriel, il serait plaisant de nous les faire partager. Donc, n'hésitez pas non plus à nous faire partager vos créations !
Remerciements▲
Un grand merci à Kerod pour sa relecture avisée et ses conseils précieux !