ANIMATION CARRE ROUGE EN BOUCLE
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.1.js"></script>
Pour certaines animations (Effets de rebondissements par exemple), Nous vous préconisons également le fichier suivant
A l’adresse http://gsgd.co.uk/sandbox/jquery/easing/ à intégrer de la façon : <script type="text/javascript" src="jquery.easing.1.3.js"></script>
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>jQuery, animation en boucle, animate, easing, easeOutBounce jQuery</title>
/*Style de la page */
body {font:14px verdana, sans-serif;background:#000000;color:#C0C0C0;font-weight:bold;}
/*Dimensions et position initiale du carre rouge*/
#carre {position:absolute;left:0;top:0;width:80px;height:80px;background:#FF0000;}
/*Style du texte de la page*/
#page {font:14px verdana, sans-serif;color:#C0C0C0;font-weight:bold;position:absolute;left:100px;top:100px;background:#000000;}
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
//Permet d’éviter les conflits avec d’éventuels plugins
jQuery.noConflict();
//Lancement de l’animation au chargement de la fenêtre
jQuery(function(){
AnimDiv();
});
//Fonction permettant à la div “carré” de faire le tour de la page
function AnimDiv() {
//Récupération de la largeur et de la hauteur de la page
var posY = jQuery(document).height();
var posX = jQuery(document).width();
//Utilisation de la méthode animate pour les 4 mouvements de l’animation
jQuery("#carre").animate({left: [ posX - 80 , 'easeOutBounce']}, 2000);
jQuery("#carre").animate({top: [ posY - 80 , 'easeOutBounce']}, 2000);
jQuery("#carre").animate({left: [0, 'easeOutBounce']}, 2000);
jQuery("#carre").animate({top: [0, 'easeOutBounce']}, 2000);
}
//Répétition de l’animation toutes les 10 secondes
setInterval("AnimDiv();",10000);
</script>
</head>
<body>
<div id="carre" ></div>
<div id="page" >
<font style="color:#FFFF00">CONCEVOIR FACILEMENT UNE ANIMATION EN BOUCLE</font><br>
Affichez le code source ou cliquez <a href="newsletter.php" style="color:#FFFF00;text-decoration:none">ici</a> pour recevoir le tutoriel par mail.<br><br>
</div>
</body>
</html>
PAGE DE DEMO : http://patrickcleder.com/tuto_1.php