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

Adresse d'origine

A voir également
Ce document intitulé « Créez facilement une bannière animée en jquery ! » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
5 Commentaires