Ajax:Javascript Animation

Un article de Wiki.

Sommaire 1 Introduction 2 Outils 2.1 JQuery 2.2 Prototype 2.3 Scriptaculous 2.4 MooFx

[modifier] Introduction

Ce document aborde les animations possibles en DHTML avec le DOM, Javascript et CSS.

[modifier] Outils

[modifier] JQuery

Puisque WordPress a décidé de laisser Prototype au profit de JQuery. Il va falloir aussi s'intéresser à cette librairie!

En fait, JQuery est aussi une bonne librairie Javascript pour animer votre site internet.

Le principal avantage est la taille compressée du code à télécharger.

Au niveau développeur, le style est plutôt "Quick and Dirty".

http://jquery.com/

[modifier] Prototype

http://prototype.conio.net/

[modifier] Scriptaculous

http://script.aculo.us/

http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo

[modifier] MooFx

http://moofx.mad4milk.net/

http://www.solutoire.com/experiments/moofx/moofx_accordion.php

Example 1 This is the most basic fx.Accordion effect. Code:

var accordion;
var accordionClicks;
var accordionContents;

window.onload = function() { 
accordionClicks = document.getElementsByClassName('accordion-click');
accordionContents = document.getElementsByClassName('accordion-content');
accordion = new fx.Accordion(accordionClicks, accordionContents);
} 

Example 2 This is a horizontal fx.Accordion. The buttons and content elements are in a wrapper div with overflow: hidden. Code:

var accordion;
var accordionClicks;
var accordionContents;

window.onload = function() {
accordionClicks = document.getElementsByClassName('accordion-click');
accordionContents = document.getElementsByClassName('accordion-content');
accordion = new fx.Accordion(accordionClicks, accordionContents, {width: true, height:true});
accordion.showThisHideOpen(accordionContents[0]);
}