<script type="text/javascript" src= "prototype.js"> </script> <script type="text/javascript" src= "icyeffects.js"> </script>
<!-- include library --> <script type="text/javascript" src= "prototype.js"> </script> <script type="text/javascript" src= "icyeffects.js"> </script>
<script type="text/javascript">
//On DOM loaded
Event.observe(window, "load", function(){
//Animate the Object
$('move').animate({width: 200, height: 200}, 1000);
});
</script>
<div id="move" style="width:1px; height: 1px; background-color: #ccc"> </div>
//Animate DOM element
$('element').animate(attributes, speed, options);
//Attributes to animate - Attributi da animare -> JSON
var attribute = {
width: 100,
height: 100,
left : 100,
...
}
//Speed of animation - velocità animazione -> INT
var speed = 1000; //default 500
//Options - Opzioni -> JSON - *OPTIONAL*
var options = {
//Play the animation - Avvia immediatamente l'animazione
play: false, //default TRUE -> BOOLEAN
//Type of transition - Tipo di transizione
transition: Transition.Linear,
//call on ended - chiamata a fine animazione
onEnded : function(){},
//call started - chiamata all'avvio dell'animazione
onStarted : function(){},
//call before started - chiamata prima dell'animazione
onBeforeStarted : function(){}
}
//On DOM loaded
Event.observe(window, "load", function(){
$('move').animate({
//Increment 200px form actual width
//Incrementa 200px dalla larghezza attuale
width: '+=' + 200,
//multiply the width to 200
//Moltiplica la larghezza per 200
height: '*=' + 200,
//Specify the unit of measure
//Specifica l'unità di misura
left : '200px'
}, 1000);
});
//Operator - Operatori: +=, *=, -=, /=
//On DOM loaded
Event.observe(window, "load", function(){
$('move').animate({
//Modify the background
//Modifica il colore di sfondo
backgroundColor: '#99CDFF',
//Modify text color
//Modifica il colore del testo
color: '#A4CCAA'
}, 1000);
});
//On DOM loaded
Event.observe(window, "load", function(){
//Create and stop animation - Creo e fermo l'animazione
var effect = $('move').animate({
width:100,
height:100,
opacity : 0.6
}, 500, {play:false});
//Set the loop to 20 - Setto il loop a 20
effect.setAnimationType('loop', 20);
//Play the loop - avvio il loop
effect.play();
});
Play with event - Giocare con gli eventi
//On DOM loaded
Event.observe(window, "load", function(){
var effect = $('move').animate({width:10}, 500, {
onBeforeStarted : function(){
window.alert("i'm starting - sto iniziando");
},
onStarted : function(){
window.alert("i'm started - ho iniziato");
},
onEnded : function(){
window.alert("I finished - ho finito");
}
});
//On DOM loaded
Event.observe(window, "load", function(){
var effect = $('move').animate({
width:300,
height:300
}, 500, {
//Bounce effect
transition : Transition.easeOutBounce
});
Event.observe(window, "load", function(){
//Crete the timeline - Creo la time line
var t1 = new TimeLine();
//Create and stop the effects - Creo e stoppo gli effetti
var e1 = $('move').animate({width: 100},500,{play:false});
var e2 = $('move').animate({height: 100},500,{play:false});
//Add effects - Aggiungo gli effetti
t1.add(e1, 0); //started immediately - Avviato subito
t1.add(e2, 1000); //started after 1s - Avviata dopo 1s
//run timeline - avvio la timeline
t1.run();
});
var t1 = new TimeLine();
//Create and stop the effects - Creo e stoppo gli effetti
var e1 = $('move').animate({width: 100},500,{play:false});
var e2 = $('move').animate({height: 100},500,{play:false});
var e3 = $('move').animate({left: 100},500,{play:false});
//ORDER [e1, e2 ,e3]
t1.add(e1, 0);
t1.add(e2, 0);
t1.add(e3, 0);
//ORDER [e1] -> [e2,e3]
t1.add(e1, 0);
t1.add(e2, 0, {after: e1});
t1.add(e3, 0, {after: e1});
//ORDER [e1] -> [e2] -> [e3]
t1.add(e1, 0);
t1.add(e2, 0, {after: e1});
t1.add(e3, 0, {after: e2});
//ORDER [e3] -> [e1] -> [e2]
t1.add(e1, 0);
t1.add(e2, 0, {after: e1});
t1.add(e3, 0, {before: e1});
//ORDER [e3] -> [e2] -> [e1]
t1.add(e1, 0);
t1.add(e2, 0, {before: e1});
t1.add(e3, 0, {before: e2});
//ORDER [e2,e3] -> [e1]
t1.add(e1, 0);
t1.add(e2, 0, {before: e1});
t1.add(e3, 0, {started: e2});
/*add - insert effects - inserisce gli effetti
* @PARAM effects - return by - ottenuto da: $('id').animate()
* @PARAM delay - effect delay - ritardo effetto
* @PARAM position - (after|before|sarted) effects
*/
t1.add(effects, delay, position);
/*remove
* removes the effect and its dependencies
* rimuove l'effetto e le sue dipendenze
* @PARAM effects - return by - ottenuto da: $('id').animate()
*/
t1.remove(effects);
/*rewind
* rewind all effects in the timeline
* riavvolge tutti gli effetti della timeline
*/
t1.rewind();
/*
* run
* run the timeline - avvia la timeline
*/
t1.run();
/*pause
* stop all effects in the current position
* ferma tutti gli effetti alla posizione corrente
*/
t1.pause();
/*play
* to call after pause, restart all effects
* da chiamare dopo pause fa ripartire tutti gli effetti
*/
t1.play();
$('move').fade(); //Fade
click me
$('move').appear(); //Appear
click me
$('move').blindUp(); //blindUp
click me
$('move').blindDown(); //blindDown
click me
$('move').highlight(); //highlight
click me

