Javascript : JQuery - l'animation

Description

Dans cette activité, vous allez produire, dans votre espace de téléchargement, une page web contenant le code javascript requis pour l'animation de blocs de texte en utilisant un fichier jquery.

1. Cliquez le bouton 4- Accès à mon espace de téléchargement de votre portfolio
   
   
2. Cliquez le bouton Ajouter une page avec directive en inscrivant le numéro 70863 dans le champ No de la directive
   
   
   
   
3. Affichez une ou plusieurs de ces pages en exemple
   1. http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation
   2. http://chene-bleu.info/i/ladifference/simpleanimation.html
   3. Animation sur une touche clavier
   4. http://jqueryui.com/demos/
   5. http://www.zorrito.com/animations-images-animees-jquery/
   6. http://www.w3schools.com/css3/css3_animations.asp
   7. http://www.noupe.com/jquery/cool-and-useful-jquery-image-and-content-sliders-and-slideshows.html
   
   
   
4. Prenez quelques minutes afin d'observez le code source (menu Affichage + Code source de la page).
   Notez bien que l'animation peut être lancée directement au chargement de la page ou à partir d'un évènement (clic sur un bouton).
   
   
5. Cliquez le bouton NOUVEAU afin d'insérer dans votre page le code html de la structure de base d'une page web.
   
   
6. En en-tête (entre HEAD et /HEAD, ajoutez cette ligne qui vous permettra d'utiliser le fichier jquery.js
   <script type="text/javascript" src="http://chene-bleu.info/i/ladifference/jquery.js"></script>
   
   
7. En en-tête (entre HEAD et /HEAD, ajoutez également cette ligne qui vous permettra d'utiliser le fichier jquery-color.js, qui vous permettra d'utiliser les animations de couleurs <script type="text/javascript" src="http://chene-bleu.info/i/ladifference/jquery.color.js"></script>
   
   
8. Dans la section BODY, ajoutez une DIVISION contenant des propriétés CSS en utilisant la méthode intraligne. Utilisez le code donnée en exemple comme modèle.
   
   
9. Assurez-vous que ce bloc est bien nommé. Exemple : id="carreA"
   
   
10. Choisissez de lancez votre animation directement au chargement de la page ou en utilisant un évènement (clic sur un bouton ou un lien.
    
    
11. Produisez ensuite, le code javascript (en vous servant du code donné en exemple, sans faire de copier/coller), afin d'animer un minimum de 3 propriétés de votre bloc DIV.
    
    
12. Consultez au besoin le site suivant afin de connaître l'équivalent JAVASCRIPT des propriétés CSS : http://ladifference.info/index0.asp?id=78
    
    Exemples :

    Nom de la propriété en CSS	Nom de la propriété en Javascript
    background-image	backgroundImage
    font-size	fontSize
    letter-spacing	letterSpacing
    text-align	textAlign

    
    
    
13. Validez le fonctionnement
    
    
14. Écrivez et complétez cette phrase au bas de votre page.
    J'ai utilisé le code javascript et JQuery afin d'animer les propriétés suivantes de mon bloc DIV : _____________________________________________"
15. Nommez cette page jqueryanimation.html en utilisant le champ situé complètement au bas de la page.
16. Enregistrez votre travail (cliquez le bouton ENREGISTRER, ne faites pas ENTER sur le clavier).
17. Ajoutez ensuite une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 70863
    
    
18. Inscrivez dans le champ titre : Javascript : JQuery - l'animation
    
    
19. Sélectionnez la section : MODULE JAVASCRIPT
    
    
20. Sélectionnez la matière : informatique
    
    
21. Inscrivez dans le champ no de la directive : 70863
    
    
22. Inscrivez dans votre page le titre de niveau 1 : Javascript : JQuery - l'animation
    
    
23. Ajoutez un LIEN vers votre page jqueryanimation.html
    
    
24. Visualisez votre page et apportez des modifications au besoin.