Introduction - Introduzione

IcyEffect is a lightweight javascript effects library, to extend fantastic prototype.js. It's very easy to use, cross-browser, standards compliant, provides controls to modify any CSS property of DOM's element, including colors. Optimized to make easy and fun the animation of objects writing lesser code possible.

IcyEffects è una libreria javascript leggera, di pochi Kb che permette di estendere il fantastico framework prototype rendendolo capace di animare gli oggetti del DOM in maniera rapida e divertente. Grazie ad IcyEffects infatti sarà possibile modificare tutte le proprietà CSS. IcyEffects è facile da usare ed è compatibile con tutti i maggiori browser.

Why IcyEffect? - Perchè IcyEffects?

We decided to make this engine, first of all because we did not find anything in prototype which would make easy and intuitive animation of objects, rather as with jQuery for example.
Also because we were lovers fantistic $('id') function to select the prototype objects and wanted something to extended it, the result was the command $('id'). animate() which allows you to animate the object.

Abbiamo deciso di realizzare questo engine, prima di tutto perchè non abbiamo trovato niente in prototype che rendesse facile ed intuitiva l'animazione degli oggetti, un pò come avviene per jQuery ad esempio.
Inoltre perchè eravamo innamorati della fantistica funzione $('id') di prototype per recuperare gli oggetti e volevamo qualche cosa che estendesse questa in maniera immediata, il risultato è stato il comando $('id').animate() che permette di animare l'oggetto.

Requirements & support - Requisiti e supporto

IcyEffects require fantastic Prototype framework, version 1.6.0 + to run, it has been successfully tested with these browsers: Internet Explorer 7+, FireFox 3+, Opera 9+, Safari 4+, Google Chrome 2.0+

IcyEffects richiede il fantastico framework Prototype nella versione 1.6.0 o superiori, è stato correttamente testato nei seguenti browser: Internet Explorer 7+, FireFox 3+, Opera 9+, Safari 4+, Google Chrome 2.0+

History

September 2009
First version 1.0 beta available for download.
native effects: fade, appear, blindDown, blindUp, Highlight

Installation - Installazione

First of all you must have downloaded the latest stable version from download area, the zip include two files: "prototype.js" (that can also downloaded from his site) and "icyeffects.js".

Prima di tutto si deve scaricare l'ultima versione stabile del programma dalla sezione download, lo zip contiene due file "prototype.js" (che può anche essere scaricato dal sito ufficiale di prototype) e "icyeffects.js"

Fill the code below in the tags HEAD of the page where you want to use the effects

Inserire il codice sottostante tra i tag HEAD della pagina in cui si desidera usare gli effetti

<script type="text/javascript" src= "prototype.js">
</script>
<script type="text/javascript" src= "icyeffects.js">
</script> 

This page is ready to be animated - La pagina è pronta per essere animata

API DOCUMENTATION

• basic example - esempio base
• Play with attribute - Gioca con gli attributi
• Animate the color - Animare i colori
• Create loop animation - Creare un animazione loop
• Play with event - Giocare con gli eventi
• Use the transitions - Usare le transizioni
• Use the timeline - Usare la timeline
• Effects order in time line - Ordine degli effetti nella timeline
• timeline public methods - timeline metodi pubblici
• DOM object's methods - metodi per gli oggetti del DOM

Basic example - Esempio base

Create a new page called test.html and in the HEAD tag put the code below

Crea una nuova pagina chiamata test.html e nel tag HEAD inserisci il codice sottostante

<!-- 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>

Now put the code below in the tag BODY

Ora inserisci il codice sottostante nel tag BODY

						<div id="move" style="width:1px; height: 1px; background-color: #ccc">
						</div>
						

Save, reload the page and enjoy! - Salva, ricarica la pagina e divertiti

The animate() function - La funziona animate()

is the main feature of the project, it allows you to animate objects

È la principale funzione del progetto, permette di animare ogni oggetto del DOM

					//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(){}
					}
					

more example - altri esempi

Examples - Esempi

Play with attribute - Giocare con gli attributi

						//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: +=, *=, -=, /=
						

Animate the colors - Animare i colori

						//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);
						});		
						

Create loop animation - Creare un animazione loop

						//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");
								}
						});		
						

Use the transitions - Usare le transizioni

The IcyEffecs engine is based on Penner equations (like jQuery). It gives nice and fluid effects like bouncing effects.

Il motore di effetti di IcyEffects è basato sulle fantastiche Penner Equations usate anche da JQuery, che permettono di ottenere efftti più fluidi come ad esempio l'effetto Bounce.

						//On DOM loaded
						Event.observe(window, "load", function(){
						var effect = $('move').animate({
							width:300, 
							height:300
						}, 500, {
							//Bounce effect
							transition : Transition.easeOutBounce
						});		
						

for all possible equations and their significance please visit:
Per tutte le possibili equazioni e per il loro significato si rimanda al sito:
http://www.robertpenner.com/easing/easing_demo.html

Use the timeline - Usare la timeline

timeline is the queue system that allows you to combine multiple effects, see an example

timeline è un sistema che ti permette di combinare più effetti nella pagina, vediamo un esempio

												
						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();
						});		
						

it is important to use "play:false" in all the effects that are added to the timeline

È importante aggiungere "play:false" in tutti gli effetti che vengono aggiunti alla timeline

Effects order in time line - Ordine degli effetti nella timeline

							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});
						

timeline public methods - timeline metodi pubblici

							/*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();
							
							
						

DOM object's methods - metodi per gli oggetti del DOM

						$('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

License & Download

IcyEffects is open source, released under the MIT License.

versione classica 33kb


versione compatta 16kb

Copyright (c) 2009 Becchetti Luca - Brokenice Interactive www.brokenice.it

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.