Créer un paysage d'en-tête animé avec jQuery

Date de publication : 21 avril 2009

Par Zach Dunn (Auteur)
 Didier Mouronval (Traducteur)
 

Cet tutoriel est la traduction de l'article : How to Make an Impressive Animated Landscape Header with jQuery. Retrouvez toutes les traductions de Build Internet disponibles sur http://buildinternet.developpez.com/.
Une partie du contenu d'un site n'a pas toujours à rester visible. Il peut parfois être masqué à des endroits surprenants.
Dans ce tutoriel, nous partirons d'un en-tête de style dessin animé, créerons deux états pour le contenu et nous animerons la transition entre ces états avec jQuery.
Cela va être une grosse tâche !
Je vous préviens tout de suite, il y a beaucoup de code à copier coller.
J'expliquerai l'essentiel dans le tutoriel, mais pour des raisons de place, je ne commenterai pas ligne par ligne. Si vous avez besoin d'explications complémentaires, n'hésitez pas à laisser un commentaire sur le forum.
Vous pouvez déjà voir le résultat final et télécharger les sources.
5 commentaires · Donner une note à l'article (5)

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Le but - Un paysage de dessin animé
Etape 1 - Organiser vos fichiers
Etape 2 - Intégrer les plugins
Etape 3 - Créer la structure XHTML
Etape 4 - Les styles CSS
Etape 5 - Les animations et transitions avec jQuery
Conclusion - A vous de jouer !
Remerciements


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.


Etape 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 en d'un tutoriel de Photoshop Star, l'image de fond avec les rayons vient de en myPhotoshopLink et les autres images ont été dessinées pour ce tutoriel avec l'outil crayon de Photoshop.

warning 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 en ce tutoriel.

Etape 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.


Etape 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.


Etape 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 :

  1. 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.
  2. 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.
  3. 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.
  4. 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.

Etape 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 :

  1. Le premier affiche un message de bienvenue au centre avec le paysage derrière. Le texte apparait ou disparait progressivement.
  2. 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 - A 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 !

Voir le résultat final. Télécharger les sources.


Remerciements

Un grand merci à Kerod pour sa relecture avisée et ses conseils précieux !



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Les sources présentées sur cette page sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2009 Build Internet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Droits de diffusion permanents accordés à developpez LLC. Cette page est déposée à la SACD.

Vos questions techniques : forum d'entraide JavaScript - Publiez vos articles, tutoriels et cours
et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones
Nous contacter - Hébergement - Participez - Copyright © 2000-2010 www.developpez.com - Legal informations.