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

Animation en boucle avec jquery

Avril 2017

ANIMATION CARRE ROUGE EN BOUCLE
  • 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.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>
  • HTML


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>

CONCEVOIR FACILEMENT UNE ANIMATION EN BOUCLE

Affichez le code source ou cliquez&nbsp;ici&nbsp;pour recevoir le tutoriel par mail.

        

</html>

PAGE DE DEMO : http://patrickcleder.com/tuto_1.php

Adresse d'origine

A voir également

Publié par pjcleder.
Ce document intitulé «  Animation en boucle avec 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.
Ajouter un commentaire

Commentaires

Donnez votre avis
Implémenter un lien "lire la suite..." à vos articles en jquery
Déroulez/enroulez vos bannières google adsense