JS Bin
Vous pouvez écrire vous même du code pour animer vos pages (exemple). Mais aujourd'hui, de nombreuses bibliothèques proposent des effets d'animation (exemple).
Introduction
Etudier le code permettant de rendre un effet sur un élément.function effet( elem ) {
// init : Start for example the slide down or the opacity at 0
fx(0);
// Show the element (but you can't see it, since the height or opacity is 0
show( elem );
// We are going to do a 20 frame animation that takes
// place over one second
for ( var i = 0; i <= 100; i += 5 ) {
// A closure to make sure that we have the right i
(function(){
var pos = i;
// Set the timeout to occur at the specified time in the future
setTimeout(function(){
// Set the new height or opacity of the element
fx(pos);
}, ( pos + 1 ) * 10 );
})();
}
}
Exemple
Dans le code précédant remplaçons fx() par elem.style.height.
function slideDown( elem ) {
// Start the slide down at 0
elem.style.height = '0px';
// Show the element (but you can't see it, since the height is 0)
show( elem );
// Find the full, potential, height of the element
var h = fullHeight( elem );
// We are going to do a 20 frame animation that takes
// place over one second
for ( var i = 0; i <= 100; i += 5 ) {
// A closure to make sure that we have the right i
(function(){
var pos = i;
// Set the timeout to occur at the specified time in the future
setTimeout(function(){
// Set the new height of the element
elem.style.height = (( pos / 100 ) * h ) + "px";
}, ( pos + 1 ) * 10 );
})();
}
}
Fade-in
On cherchera à remplacer fx par une fonction permettant de créer un effet d'apparition.
(function(pos){
setTimeout(function(){
elem.style.height = (( pos / 100 ) * h ) + "px";
elem.style.width = (( pos / 100 ) * h ) + "px";
elem.style.opacity= pos / 100 ;
}, ( pos + 1 ) * 10 );
})(i);
Vous pouvez voir ce code en action (ici).