Créez facilement une bannière animée en jquery !
BANNIERE ANIMEE EN JQUERY
- CONSIGNES
- Votre page doit être liée à la dernière version de jQuery (jquery-1.4.2.js)
- Si ce n’est pas le cas, vous pouvez télécharger ce fichier sur http://api.jquery.com/
- Ensuite, placez le code suivant entre les balises <head></head> : <script type="text/javascript" src="jquery-1.4.2.js"></script>
- Faites de même pour le fichier suivant : http://patrickcleder.com/jquery.color.js
- HTML, jQuery, CSS
Collez ce code dans l’éditeur de votre choix et enregistrez le avec une extension de type .html ou .php à la racine de votre site.
<!doctype html>
<html>
<head>
<title>Concevoir facilement votre bannière animée en jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<style>
/*Style general de la page*/
body {font:14px verdana, sans-serif;background:#000000;color:#C0C0C0;font-weight:bold;}
/*Style de départ de la bannière*/
#ban{position:absolute;width:50%;height:30%;left:20%;top:20%;color:#00008B;background:#fff;overflow:hidden}
/*Style de départ du premier slogan*/
#slog1{position:absolute;top:30%;left:-400px;font-weight:bold;font-size:18px;}
/*Style de départ du deuxième slogan*/
#slog2{position:absolute;top:40%;left:-400px;font-weight:bold;font-size:18px;}
/*Positionnement et dimensions des images apparaissant sur la bannière*/
#ban img {position:absolute;top:0;left:0;width:30%;height;50%;}
</style>
<script type="text/javascript">
//Méthode évitant de rentrer en conflit avec d’autres plugins
jQuery.noConflict();
jQuery(function(){
//Au chargement de la page, 1ère exécution de toutes les fonctionnalités //de la bannière
depObj();
//Puis toutes les 12 secondes
setInterval("depObj();",12000);
});
//Fonction regroupant tous les effets et animations de la bannière
function depObj(){
//Apparition/Disparition du premier slogan
jQuery('#slog1').animate({left:"40%"},1000);
jQuery('#slog1').delay(500).fadeOut(1000);
//Apparition/Disparition du deuxième slogan
jQuery('#slog2').delay (2500).animate({left:"40%"},2000);
jQuery('#slog2').delay(2000).fadeOut(1000);
//Attribution du style de la bannière
jQuery('#ban').delay(2000).animate({backgroundColor:"blue"},2000);
jQuery('#ban').delay(2000).animate({color:"white"},500);
//Tableau contenant les id de chaque image
var tab = new Array("1","2","3","4","5","6","7","8");
//Choix aléatoire de l’id d’une image dans le tableau
cImg = Math.floor ( Math.random() * tab.length );
//Apparition/Disparition de cette image
jQuery('#' + tab[cImg * ).delay(4000).slideDown();
jQuery('#'+ tab[cImg * ).delay(3000).slideUp();
//Suppression de la balise a href de la bannière
jQuery('#ban a').remove();
//Ajout d’une balise a href dans la bannière
jQuery('#ban').append('');
var temp = 6000;
var texte = "www.patrickcleder.com";
//Apparition lettre par lettre du lien ci-dessus
var extrait = texte.split("");
for (i=0;i < extrait.length ;i++){
setTimeout("jQuery('#ban a').append('" + extrait[i * + "');",temp);
temp+=50;
}
//Changement de style de la bannière
jQuery('#ban').delay(4000).animate({backgroundColor:"red"},2000);
jQuery('#ban').delay(4000).animate({color:"white"},500);
//Repositionnement des textes
jQuery('#slog2').animate({left:"-400px"},9000);
jQuery('#slog2').fadeIn();
jQuery('#slog1').animate({left:"-400px"},9000);
jQuery('#slog1').fadeIn();
}
</script>
</head>
<--Présentation de la page-->
UNE BANNIERE ANIMEE EN JQUERY
Réalisez vos bannières pro en toute simplicité!
>
<--Div représentant la bannière-->
<--Liste des images-->
<--Veillez à la correspondance des id avec le contenu du tableau permettant-->
<--le choix aléatoire d’une image-->