CodeS-SourceS
Rechercher un code, un tuto, une réponse

Créez facilement une bannière animée en jquery !

Octobre 2017

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


[Image:http://static.commentcamarche.net/codes-sources.commentcamarche.net/pictures/faq-7a5fda028d74995138d9fbfb3502da1c.png|500px||center]

Adresse d'origine
Publié par pjcleder.
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.
Personnalisation d'une fenêtre alert()
Concevez en quelques lignes votre shadow box en jquery