PAGE DU MOMENT - MENU SLIDE IMAGES - TUTORIEL LE PLUS DEMANDE ACTUELLEMENT - SHADOW BOX
Les nouveaux scripts et tutoriaux apparaissent désormais sur la page de script à la demande
Animation/Effets au choix
Le menu de style "Accordéon" que vous avez utilisé pour accéder ici est très simple à mettre en oeuvre en JQuery. Certains tutoriaux de cette page sont actuellement en cours de préparation. Revenez ici régulièrement.
HTMLCe menu n'est ni plus ni moins qu'une liste dont certains éléments sont masqués ou non. Entre les balises <body>
et </body>, construisez une liste ordonnée comme suit :
<div id="effet">
<p>Animation/Effets au choix</p>
<ul>
<li id="1" class="menu">Menu 1</li>
<ul id="menu1" class="sm">
<li><a href="#">Sous-menu</a></li>
<li><a href="#">Sous-menu</a></li>
<li><a href="#">Sous-menu</a></li>
</ul>
<li id="2" class="menu">Menu 2</li>
<ul id="menu2" class="sm">
<li><a href="#">Sous-menu</a></li>
<li><a href="#">Sous-menu</a></li>
<li><a href="#">Sous-menu</a></li>
</ul>
<li id="3" class="menu">Menu 3</li>
<ul id="menu3" class="sm">
<li><a href="#">Sous-menu</a></li>
<li><a href="#">Sous-menu</a></li>
<li><a href="#">Sous-menu</a></li>
</ul>
<li id="4" class="menu">Menu 4</li>
<ul id="menu4" class="sm">
<li><a href="#">Sous-menu</a></li>
<li><a href="#">Sous-menu</a></li>
<li><a href="#">Sous-menu</a></li>
</ul>
</ul>
</div>
Nous allons mettre tout cela en forme notre menu afin que les sous-menus soient masqués.
Insérez le code suivant entre des balises <style> et </style> ou dans un fichier externe .css :
<style>
#menu ul li {
cursor:pointer; /* Permet de modifier l'apparence du curseur de la souris */
}
#menu a {
text-decoration:none; /* Permettra aux sous-menus de ne pas être soulignés */
}
.sm {
display:none; /* Masque les sous-menus */
}
</style>
Nous allons maintenant précharger la fonction suivante entre les balises <head> et </head>
<script type="text/javascript">
jQuery.noConflict;
$(document).ready(function(){
var idMenu;
jQuery(function(){
//Lien avec le survol de la souris sur les objets de la classe "menu"
jQuery(".menu").bind("mouseover", function(){
recupId(this); //Récupération de l'id du menu sélectionné
//Gestion du masquage des sous-menus activés
jQuery(".menu").each(function (i) {
if (jQuery(".sm").attr("id")!= idMenu) {
jQuery(".sm").css({display: 'none'});
}
});
jQuery('#'+"menu"+idMenu).css({display: 'block'});//Activation des sous-menus
});
function recupId(o) {
idMenu = jQuery(o).attr("id");//Fonction de récupération du menu sélectionné
}
});
});
</script>
Si vous rencontrez le moindre souci, n'hésitez pas à nous contacter via l'onglet "Contact" de la page principale du site. Le support JQuery est totalement gratuit !!!
Pour ceux d'entre vous qui ne sont pas encore totalement rompus à ce genre d'exercice, nous imaginons aisément
que vous n'avez qu'une envie : Changez l'apparence de ce menu somme toute un peu spartiate en terme de design !
Nous allons donc ici plus nous intéresser au côté CSS qu'à JQuery mais nous apporterons également quelques petits changements
sur le plan ergonomique.
Le résultat pour les gens pressés : Aperçu
Nous allons modifier la structure initiale en enlevant les balises <li> et </li> autour des liens a href et rajouter une balise <br> à la fin comme ci-dessous :
<div id="effet" class="effect">
<p>Notre menu relooké</p>
<br>
<ul>
<li id="1" class="menu">Menu 1</li>
<ul id="menu1" class="smenu">
<a href="#" id="PHP" class="cadre">PHP</a><br>
<a href="#" id="CSS" class="cadre">CSS</a><br>
<a href="#" id="XHTML" class="cadre">XHTML</a><br>
</ul>
<li id="2" class="menu">Menu 2</li>
<ul id="menu2" class="smenu">
<a href="#" id="MySQL" class="cadre">MySQL</a><br>
<a href="#" id="Javascript" class="cadre">Javascript</a><br>
<a href="#" id="JQuery" class="cadre">Jquery</a><br>
</ul>
<li id="3" class="menu">Menu 3</li>
<ul id="menu3" class="smenu">
<a href="#" id="AJAX" class="cadre">AJAX</a><br>
<a href="#" id="Tutoriaux" class="cadre">Tutoriaux</a><br>
<a href="#" id="Scripts" class="cadre">Scripts</a><br>
</ul>
<li id="4" class="menu">Menu 4</li>
<ul id="menu4" class="smenu">
<a href="#" id="Webmaster" class="cadre">Webmaster</a><br>
<a href="#" id="Développeur PHP" class="cadre">Développeur PHP</a><br>
<a href="#" id="Chef de projet" class="cadre">Chef de projet</a><br>
</ul>
</ul>
</div>
Nous allons modifier le style de façon à ce que notre menu soit un peu plus esthétique. Les effets significatifs sont commentés.
#effet {
position:absolute;
top:30%;
color:#fff;
font-size:14px;
}
#effet ul li {
cursor:pointer;
text-align:left;
background-color: #00008B;
color:#fff;
}
#effet ul li:hover { background-color: #C0C0C0; } /* Changement de la couleur d'arrière-plan au survol de la souris */
#effet ul li:hover { color: #ffff00; } /* Changement de couleur du texte au survol de la souris */
#effet a {
text-decoration:none; /* Les liens ne seront pas soulignés */
color:#fff;
}
#effet a:hover { color: #ffff00; } /* Changement de couleur du texte au survol de la souris sur les liens */
#effet p {
color:#ffff00;
}
.menu {
border:1px solid #fff;
list-style-type:none; /* Absence de points devant chaque menu */
}
.smenu {
display:none;
list-style-type:none; /* Absence de points devant chaque sous-menu */
margin-right:3px;
}
Nous allons effectuer des modifications et des ajouts dans le code JQuery pour qu'il soit en adéquation avec l'aperçu que vous allez découvrir ci-dessous.
jQuery(".menu").bind("mouseover", function(){
jQuery(".menu").bind("click", function(){
jQuery(function(){
jQuery(".cadre").bind("click",function(){
jQuery(".smenu").css({display: 'none'});
});
});
Le menu va donc fonctionner avec le clic de souris et se refermera entièrement après sélection d'un sous-menu.
Et voilà le résultat : Aperçu
Le tutoriel de ce menu est en préparation. Nous allons en faire un plugin de façon à ce qu'il soit plus confortable en terme de paramétrage.
Attention, cet aperçu est cours de développement et le plugin construit autour de ce menu offrira plus de fonctionnalités.
Le coin en bas et à droite de cette page produit un effet bien connu de tous les internautes mais il est généralement réalisé avec Flash. Ici en quelques lignes de code, nous allons vous montrer qu'avec JQuery, il est très facile de le mettre en oeuvre. Revenez vite !
Nous allons utiliser deux images dont l'une servira d'arrière-plan à l'autre. CSS et JQuery se chargeront de la mise en forme et de l'animation. Voici les deux images utilisées pour le coin de feuille de cette page :
Télécharger l'image "rblcorner" Télécharger l'image "rbbcorner"
<a id="corner" href="Lien de votre choix"><img src="/catalogue/rblcorner.png"/></a>
Ces quelques lignes CSS vont permettre de positionner l'effet en bas et à droite de la page et de placer l'une des
images en arrière-plan de l'autre.
#corner {
position:absolute;
bottom:0px; right:0px;
z-index:9999;
background:url(/catalogue/rbbcorner.png) bottom right; //définition de l'arrière-plan
}
#corner img {
border:0;
width:80px; height:80px;
-ms-interpolation-mode: bicubic;
}
Les fonction hover et animate vont nous permettre de réduire ou agrandir le coin de feuille suivant le survol du curseur
de la souris sur la zone.
Placez ces quelques lignes de code entre les balises <head> et </head> :
jQuery(function() {
jQuery('#corner img').hover(function() {
jQuery(this).stop().animate({ width:'200px', height:'200px' });
}, function() {
jQuery(this).stop().animate({ width:'80px', height:'80px' });
});
});
Respectez bien la dénomination de votre id côté HTML puisqu'il est référencé côté CSS et Jquery. Maintenant, libre à vous
de personnaliser votre effet en changeant d'image.
Nous le rappelons constamment sur ce site, Le support PHP,CSS,Javascript,JQuery est totalement gratuit et personnalisé.
Posez vos questions et nous y répondons rapidement.
Nous allons vous expliquer comment développer un plugin vous permettant de placer un calendrier où vous le désirez sur vos pages.
Pour les gens pressés, vous pouvez jeter un oeil sur l'aperçu ci-dessous :
Attention, il s'agit d'un calendrier on ne peut plus simple. Notre but est de vous familiariser avec le développement de plugins jQuery et certaines subtilités en CSS ou XHTML. Vous pourrez certainement ensuite modifier le design ou y ajouter des fonctionnalités.
Nous allons simplement créer une div et deux boutons. Le code ci-dessous est à insérer entre les balises <body> et </body> de votre page. La balise div servira naturellement de cadre à notre calendrier et les deux boutons nous permettront par la suite de passer au mois suivant ou précédent.
<div id=info>
</div>
<input id="pdate" type="button" value=">>" onclick="if (mois==12){mois=1;annee++;}else{mois++;};jQuery('#info').html('');jQuery('#info').jqDate(mois,annee);" />
<br>
<input id="ldate" type="button" value="<<" onclick="if (mois==1){mois=12;annee--;}else{mois--;};jQuery('#info').html('');jQuery('#info').jqDate(mois,annee);" />
Avant de s'intéresser au plugin du calendrier, nous mettre en forme le cadre et les deux boutons pour les positionner correctement. Insérer le code ci-dessous entre des balises <style> et </style> ou dans un fichier externe .css :
#info {
position:absolute;
width:260px;
height:220px;
top:45%;
left:25%;
background:#C0C0C0;
border:1px solid #fff;
color:#00008B;
}
#info a {
color:#ffff00;
}
#ldate {
position:absolute;
top:45%;
left:25%;
width:37px;
border:none;
cursor:pointer;
color:#00008B;
font-weight:bold;
}
#pdate {
position:absolute;
top:45%;
left:47%;
width:37px;
border:none;
cursor:pointer;
color:#00008B;
font-weight:bold;
}
Sauvegardez le code ci-dessous dans un fichier d'extension .js que vous lierez ensuite à votre page entre les balises <head> et </head>:
ex:
<script type="text/javascript" src="calendrier.js"></script>
(function($) {
$.fn.jqDate = function(m,a) {
return this.each(function(){
var $this = jQuery(this);
calendrier(m,a);
function calendrier(mois,an) {
aMois = new Array
("Janvier","Février","Mars","Avril","Mai","Juin","Juillet",
"Août","Septembre","Octobre","Novembre","Décembre");
jour = new Array ("Lu","Ma","Me","Je","Ve","Sa","Di");
var dDate = new Date();
var mMois = dDate.getMonth() + 1;
var aAnnee = dDate.getFullYear();
var jJour = dDate.getDate();
var dep = new Date(an,mois-1,1);
var deb = dep.getDay();
if(deb > 0) deb--;
else deb = 6;
var fin = 31;
if(mois==4 ||mois==6 || mois==9 || mois==11 ) --fin;
if(mois==2) {
fin = fin - 3;
if(an%4==0) fin++;
if(an%100==0) fin--;
if(an%400==0) fin++;
}
$this.append('<div>');
var encours = aMois[mois-1] + " " + an;
inserSemaine('<center><a>' + encours + '</a></center>');
$this.append("<br>");
var nbJour = 1;
$this.append("<center>");
for(var i=0;i<=5;i++) {
$this.append("<br>");
for(var j=0;j<=5;j++) {
if((i==0)&&(j < deb))
inserJour(" ");
else {
if(nbJour > fin)
inserJour(" ");
else {
if((an==aAnnee)&&(mois==mMois)&&(nbJour==jJour))
if (nbJour < 10 ){
inserJour(" " + "<a>" + nbJour + "</a>" + " ");
}
else
{
inserJour(nbJour + " ");
}
else
if (nbJour < 10 )
{
inserJour(" " + nbJour + " ");
}
else
{
inserJour(nbJour + " ");
}
nbJour++;
}
}
}
if(nbJour > fin)
inserJour(" ");
else {
if((an==aAnnee)&&(mois==mMois)&&(nbJour==jJour))
if (nbJour < 10 ){
inserJour(" " + "<a>" + nbJour + "</a>" + " ");
}
else
{
inserJour(nbJour + " ");
}
else
if (nbJour < 10 ){
inserJour(" " + nbJour + " ");
}
else
{
inserJour(nbJour + " ");
}
nbJour++;
}
$this.append("<br>");
}
$this.append("</div>");
}
function inserSemaine(Semaine) {
$this.append(Semaine);
$this.append("<br>");
for(var i=0;i<=6;i++) {
inserJour(jour[i] + " ");
}
$this.append("<br>");
}
function inserJour(Liste) {
$this.append(Liste);
}
});
}
})(jQuery);
Pour rendre le calendrier actif, il vous suffit de le précharger entre les balises <head> et </head> de votre page comme ci-dessous :
<script type="text/javascript">
jQuery.noConflict;
var jDate = new Date();
var mois;
var annee;
jQuery(document).ready(function(){
jQuery(function(){
mois = jDate.getMonth() + 1;
annee = jDate.getFullYear();
$("#info").jqDate(mois,annee);
});
});
</script>
Si vous avez suivi les consignes ci-dessus, votre calendrier devrait fonctionner. Ce tutoriel aura permis une petite révision sur les dates en Javascript ! Vous aurez aussi remarqué l'utilisation fréquente de la fonction jQuery "append" qui permet l'insertion dynamique d'éléments dans d'autres existant déjà. En effet, au départ, la balise div représentant le cadre du calendrier est vide et le plugin se charge de générer du HTML pour le construire.
Un compte à rebours peut être amusant pour animer l'annonce d'un futur événement sur votre site.
Le plugin compte à rebours jQuery sur lequel nous allons rédiger un tutoriel permettra le lancement automatique d'un affichage prédéfini.
Nous allons créer deux div dont une que le plugin se chargera de remplir d'objets divers au lancement de la page. Nous allons placer le code suivant entre les balises <body> et </body> :
<div id="info">
</div>
<div id="fin">
<form id="tr">
<br>
<center>
<a >Temps restant jusqu'à Noël prochain !</a>
<br>
<input type="text" id="christmas" style="width:150px;border:none;background:#C0C0C0;font-weight:bold;color:#ffff00"/>
<br>
</center>
</form>
</div>
La partie mise en forme et positionnement de nos deux div : L'une contiendra le temps qu'il nous reste jusqu'à Noël prochain et l'autre vous permettra de lancer un compte à rebours depuis une date que vous aurez sélectionnée. Le code ci-dessous entre des balises <style> et </style> ou dans un fichier externe .css :
#info {
position:absolute;
width:350px;
height:210px;
top:45%;
left:25%;
background:#C0C0C0;
border:1px solid #fff;
color:#00008B;
}
#info a {
color:#ffff00;
}
#fin {
position:absolute;
width:350px;
height:50px;
top:35%;
left:25%;
background:#C0C0C0;
border:1px solid #fff;
color:#00008B;
}
#fin a {
color:#00008B;
}
Notre plugin se divise en trois parties: Une option permettant d'ajouter à une div les éléments nécessaires à la sélection d'une
date. Une autre permettant le déclenchement automatique de l'affichage du compte à rebours par rapport à une date prédéfini et la
dernière liée au bouton permettant de lancer l'affichage à la demande.
Copiez le code source suivant, sauvegardez-le dans un fichier .js et liez le à votre page
(function($) {
$.fn.jqCptRebours = function(n) {
return this.each(function(){
var $this = jQuery(this);
if (n==0){
$this.append('<form id="cptr">' +
'<br>' +
' Jour' + ' ' + ' Mois' + ' ' + ' Année' +
'<br>>' +
'<center>' +
'<select id="jour">' +
'<option value="1">1</option>' +
'<option value="2">2</option>' +
'<option value="3">3</option>' +
'<option value="4">4</option>' +
'<option value="5">5</option>' +
'<option value="6">6</option>' +
'<option value="7">7</option>' +
'<option value="8">8</option>' +
'<option value="9">9</option>' +
'<option value="10">10</option>' +
'<option value="11">11</option>' +
'<option value="12">12</option>' +
'<option value="13">13</option>' +
'<option value="14">14</option>' +
'<option value="15">15</option>' +
'<option value="16">16</option>' +
'<option value="17">17</option>' +
'<option value="18">18</option>' +
'<option value="19">19</option>' +
'<option value="20">20</option>' +
'<option value="21">21</option>' +
'<option value="22">22</option>' +
'<option value="23">23</option>' +
'<option value="24">24</option>' +
'<option value="25">25</option>' +
'<option value="26">26</option>' +
'<option value="27">27</option>' +
'<option value="28">28</option>' +
'<option value="29">29</option>' +
'<option value="30">30</option>' +
'<option value="31">31</option>' +
'</select>' +
'<select id="mois">' +
'<option value="Jan">Janvier</option>' +
'<option value="Feb">Février</option>' +
'<option value="Mar">Mars</option>' +
'<option value="Apr">Avril</option>' +
'<option value="May">Mai</option>' +
'<option value="Jun">Juin</option>' +
'<option value="Jul">Juillet</option>' +
'<option value="Aug">Août</option>' +
'<option value="Sep">Septembre</option>' +
'<option value="Oct">Octobre</option>' +
'<option value="Nov">Novembre</option>' +
'<option value="Dec">Décembre</option>' +
'</select>' +
'<input type="text" id="Annee" maxlength="4" style="width:40px"/>' +
'<br>' +
'<br>' +
'<input type="text" id="Compte"/>' +
'<br>' +
'<br>' +
'<input id="cr" type="button" value="Compte à rebours"/>' +
'<br>' +
'<br>' +
'Saisissez une date valide et cliquez !' +
'<br>' +
'Le compte à rebours va démarrer dans la zone de texte vierge.' +
'<br>' +
'Vous pouvez alors modifier la date sans cliquer une nouvelle fois sur le bouton.' +
'</form></center>');
}
if (n==1) {
function Rebours() {
var date1 = new Date();
var date2 = new Date (document.forms[0].elements[1].value + " " + document.forms[0].elements[0].value + " " + "00:00:00" + " " + document.forms[0].elements[2].value);
var sec = (date2 - date1) / 1000;
var nb = 24 * 3600;
if (sec > 0) {
j = Math.floor (sec / nb);
h = Math.floor ((sec - (j * nb)) / 3600);
mn = Math.floor ((sec - ((j * nb + h * 3600))) / 60);
sec = Math.floor (sec - ((j * nb + h * 3600 + mn * 60)));
document.forms[0].elements[3].value = j +" j "+ h +" h "+ mn +" min "+ sec + " s ";
}
}
Rebours();
}
if (n==2) {
function Rebours() {
var date1 = new Date();
var date2 = new Date ("Dec" + " " + "25" + " " + "00:00:00" + " " + "2010");
var sec = (date2 - date1) / 1000;
var nb = 24 * 3600;
if (sec > 0) {
j = Math.floor (sec / nb);
h = Math.floor ((sec - (j * nb)) / 3600);
mn = Math.floor ((sec - ((j * nb + h * 3600))) / 60);
sec = Math.floor (sec - ((j * nb + h * 3600 + mn * 60)));
document.getElementById("christmas").value = j +" j "+ h +" h "+ mn +" min "+ sec + " s ";
}
}
Rebours();
}
});
}
})(jQuery);
Nous allons maintenant précharger notre plugin entre les balises <head> et >/head>.
<script type="text/javascript" src="cptrebours.js"><script></script>
<script type="text/javascript">
jQuery.noConflict;
jQuery(document).ready(function(){
jQuery(function(){
jQuery("#info").jqCptRebours(0);
});
});
jQuery(document).ready(function(){
jQuery(function(){
tRebours=setInterval("jQuery('#fin').jqCptRebours(2);",1000);
});
});
jQuery(document).ready(function(){
jQuery(function(){
jQuery("#cr").click(function(){
tRebour=setInterval("jQuery(document).jqCptRebours(1);",1000);
});
});
});
</script>
Pour toute question, n'hésitez pas à nous contacter. Nous sommes réactifs et saurons fournir des explications en cas d'incompréhension ou de problèmes survenus lors de l'utilisation de ces codes. Vous pouvez cliquer sur le lien contact.
Nous ne savons pas si ce thème vaut bien une rubrique mais nous tenions quand même à vous présenter cette possibilité qu'offre CSS au survol de la souris. En effet ":hover" permet la modification de mise en forme de plusieurs paramètres en une seule ligne comme indiqué ci-dessous :
#t_7b a {
margin-left:15px;
color:#fff;
font-weight:normal;
font-size:11px;
}
#t_7b a:hover { color: #ffff00;font-weight:bold;font-size:18px;margin-left:45px; }
Attention, ":hover" dans CSS n'a d'incidence que s'il existe un paramètre initial correspondant.
Vous pouvez tester l'effet via le lien ci-dessous :
N'hésitez pas à nous contacter en cas de problème via l'onglet "Contact" de la page d'accueil de ce site.
Vous pouvez jeter un oeil sur le résultat obtenu via le lien ci-dessous
Ces animations permettent de dynamiser vos titres ou bannières et de rendre votre page conviviale dès son chargement. Affichez le code source de la page. Lisez le code contenu entre les balises <head> et </head> puis dans les fichiers animtext.js et animtext.css.
Vous pouvez jeter un oeil sur le résultat obtenu via le lien ci-dessous
L'effet d'ombre est susceptible d'améliorer l'esthétique de vos cadres ou autres bannières Affichez le code source de la page. Lisez le code contenu entre les balises <head> et </head> puis dans les fichiers ombre.js et ombre.css.
Nous avons tous envie de maintenir une information visible même si l'utilisateur scrolle sur votre page.
Une fois de plus, JQuery et CSS vont nous permettre de mettre ce dispositif en place en quelques lignes de code.
En scrollant ici même, vous vous apercevez que la petite div reste toujours en haut du cadre.
Vous allez donc créer deux div (Une contenant l'autre) dont l'une sera flottante. Pour ce faire, insérez le code suivant entre les balises
<body> et </body> de votre page :
<div id="t_10b" class="tutoriel">
Une div flottante
<div id="flot">
<center>
Je maintiens
<br>
ma position
</center>
Puis ensuite le contenu de votre div conteneur
</div>
</div>
Avant d'insérer les lignes ci-dessous, veillez bien à ce que la div conteneur soit scrollable comme sur cette page. Pour ce faire, il
est nécessaire que la mise en forme CSS de l'objet en question contienne la ligne suivante : overflow:scroll; .
Une fois de plus, respectez bien la dénomination de l'id de la div flottante et insérer le code dans le fichier externe .css ou entre
des balises <style> et </style>.
#flot {
position: absolute;
top: 0; left:300px;
z-index: 10;
background:#00008B;
color:#fff;
padding:5px;
border:1px solid #fff;
text-align:center;
font-weight:bold;
width:100px;
}
Nous allons déclencher le repositionnement de la div flottante à l'aide de la fonction jQuery scroll. Pour finir, nous
signalons que votre div peut très bien s'adapter à la page elle-même. Dans ce cas, il vous suffira de modifier la ligne suivante :
jQuery("#t_10b").scroll(function() par jQuery(window).scroll(function()
$(document).ready(function() {
jQuery("#t_10b").scroll(function() {
jQuery('#flot').animate({top:jQuery("#t_10b").scrollTop()+"px" },{queue: false, duration: 350});
});
});
Respectez bien la dénomination des id en HTML puisqu'ils sont référencés côté CSS et Jquery. Maintenant, libre à vous
de personnaliser votre div en modifiant les paramètres de mise en forme.
Nous le rappelons constamment sur ce site, Le support PHP,CSS,Javascript,JQuery est totalement gratuit et personnalisé.
Posez vos questions et nous y répondons rapidement.
Vous pouvez jeter un oeil sur le résultat obtenu via le lien ci-dessous
Une boite bien pratique par exemple pour concentrer les liens d'une page dans un petit espace. Affichez le code source de la page. Lisez le code contenu entre les balises <head> et </head> puis dans les fichiers defil.js et defil.css.
Vous pouvez jeter un oeil sur le résultat obtenu via le lien ci-dessous
Ces animations permettent d'attirer le regard de vos visiteurs sur des points particuliers et de rendre votre page bien vivante dès son chargement. Affichez le code source de la page. Lisez le code contenu entre les balises <head> et </head> puis dans les fichiers appear.js et appear.css.
Vous pouvez y jeter un oeil via le lien ci-dessous
Cette page fait l'objet d'une évolution quotidienne. Revenez la voir régulièrement !
Affichez la source à l'aide de votre navigateur. Visualisez le code contenu entre les balises <head> et </head> puis dans le fichier jqueryanimation.css.
