Script.aculo.us: primi effetti di base
Nella prima lezione su script.aculo.us hai avuto modo di vedere come può essere facile implementare effetti grafici avanzati all’interno del tuo sito utilizzando soltanto una riga di codice. Come già detto questo è proprio uno dei punti di forza non solo di Scriptaculous, ma un po’ di tutti i frameworks javaScript.
E così, dopo la prima lezione (a dire il vero più teorica che pratica), oggi cominceremo ad implementare insieme i nostri primi effetti con Scriptaculous.
Più in particolare vedremo come realizzare questi effetti:
- Appear;
- Fade;
- ScrollTo;
Come nella scorsa lezione avrai bisogno di una pagina html (index.html), un foglio di stile (style.css) e i files del frameworks javascript di Scriptaculous ossia:
- prototype.js;
- scriptaculous.js;
- effects.js.
Per una questione di pulizia del codice, ci serviremo di un altro file javascript, (functions.js), all’interno del quale inseriremo tutti i nostri effetti.
Primo passo: l’HTML
Creiamo la nostra index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<title>Script.aculo.us: effetti base | Your Inspiration Web</title>
<script src="js/prototype.js"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>
<script src="js/prova.js"></script>
</head>
<body>
<div id="header">
<h1>Script.aculo.us: gli effetti di base</h1>
</div>
<div id="content">
<div id="boxExample">
</div>
<a href="#">Clicca qui per attivare l'effetto</a>
</div>
<div id="footer">
</div>
</body>
</html>
Alla quale colleghiamo un semplice foglio di stile (style.css):
body
{
margin: 0;
}
a
{
color: #668800;
}
h1, h2, h3
{
text-align: center;
}
#content
{
width: 960px;
height: auto;
margin: 0px auto 0px auto;
}
#boxExample
{
width: 50px;
height: 50px;
background-color: #ce665f;
border: 2px solid #000;
}
Esaminiamo il codice html: subito dopo l’header – che, come puoi vedere, non ha niente di nuovo – abbiamo creato una sezione che fungerà da contenitore:
<div id=”content”>
all’interno del quale abbiamo creato la nostra sezione cavia, ossia:
<div id=”boxExample”>
e successivamente abbiamo inserito un link che ha lo scopo di attivare l’effetto
<a href="#">Clicca qui per attivare l'effetto</a>
Come puoi notare non abbiamo ancora aggiunto alcun evento associato all’interazione con questo link, lo faremo volta per volta in base all’effetto che vogliamo implementare.
Nel foglio di stile abbiamo soltanto dato una formattazione di massima alla nostra pagina web.
Framework Scriptaculous: Effect.Appear
Uno degli effetti per antonomasia è sicuramente la dissolvenza in entrata: ne siamo perennemente circondati, dai video fino alle slides in Power Point; perché quindi non implementarlo anche all’interno di una pagina web?
Come hai potuto notare nella lezione precedente, il dispendio di energie nell’implementazione degli effetti è davvero minimo; ci basterà infatti solo una riga di codice affinché il nostro box appaia elegantemente con una dissolvenza!
Come prima cosa la nostra sezione “boxExample” deve essere impostata su:
display:none;
Applica questo semplice attributo al div in questione all’interno della pagina “index.html”. Come? Così:
<div id=”boxExample” style=”display:none;”>
Potresti ottenere lo stesso risultato aggiungendo questa riga di codice all’interno del nostro file javascript che abbiamo denominato “function.js”:
document.getElementById(‘boxExample’).style.display=”none”;
In questa lezione, però preferiamo utilizzare lo stile inlinea all’interno della pagina html.
Adesso apriamo il file javascript che abbiamo creato in precedenza (“functions.js”) e implementiamo il nostro primo effetto:
function appari(){
$(‘boxExample’).appear();
}
Nella lezione precedente hai avuto modo di studiare la sintassi impiegata da scriptaculous:
servendosi dei selettori css questo framework ci da la possibilità di selezionare qualsiasi elemento presente all’interno della nostra pagina html semplicemente anteponendo il carattere $.
Immediatamente dopo la dichiarazione dell’elemento bisogna inserire un punto e quindi la funzione da attivare, in questo caso (“appear”).
Torniamo all’interno della nostra pagina “index.html”, ed in corrispondenza del link:
<a href="#">Clicca qui per attivare l'effetto</a>
Aggiungiamo l’evento – al click del mouse – associato alla funzione “appari()”:
<a href="#" onclick=”appari()”>Clicca qui per attivare l'effetto</a>
Associando la funzione “appari()” al click del mouse, il nostro box spunterà fuori dal nulla con un elegante effetto di dissolvenza in entrata, come puoi notare in questa pagina, sotto la voce Effect.Appear.
In questo caso stiamo associando una funzione ad un singolo elemento. E se volessimo applicare la funzione “appari()” a più di un elemento?
No, non dobbiamo creare tante funzioni clone, bensì possiamo strutturare un’unica funzione in questo modo:
function appari(elemento)
{
$(elemento).appear()
}
ed all’interno del nostro file html
<a href="#" onclick=”appari(‘boxExample’)”>Clicca qui per attivare l'effetto</a>
Creando una variabile generica “elemento”, lasciamo comunicare al file html su quale elemento deve essere applicato l’effetto: la funzione sarà unica, ma le applicazioni in questo modo possono essere molteplici!
Le proprietà della funzione: Effect.Appear
Effect.Appear ha delle proprietà, ossia informazioni aggiuntive che permettono di ottenere variazioni sull’effetto:
- duration (la durata dell’effetto espressa in secondi);
- from (il livello di opacità dal quale partire);
- to (il livello di opacità al quale fermarsi).
Volendo aggiungere la proprietà duration alla nostra funzione:
function appari(){
$(‘boxExample’).appear({ duration: 3.0});
}
Abbiamo comunicato alla funzione che la durata dell’effetto deve essere di 3 secondi.
L’effetto opposto ad Effect.Appear è Effect.Fade.
Framework Scriptaculous: Effect.Fade
Rispetto all’effetto precedente il nostro box “boxExample” non deve essere impostato su
display:none;
altrimenti non sarà possibile attivare l’effetto, perché la funzione non troverebbe il box da far sparire in dissolvenza.
In questo caso il markup HTML della nostra sezione all’interno della pagina “index.html” sarà il seguente:
<div id=”boxExample”>
Passiamo al file “functions.js” e creiamo la funzione “scompari()” che permetterà di applicare la dissolvenza in uscita sul box indicato:
function scompari(){
$(‘boxExample’).fade();
}
Le proprietà della funzione: Effect.Fade
Effect.Fade ha delle proprietà, identiche a quelle di Effect.Appear ossia:
- duration (la durata dell’effetto espressa in secondi);
- from (il livello di opacità dal quale partire);
- to (il livello di opacità al quale fermarsi).
Volendo aggiungere la proprietà duration alla nostra funzione:
function scompari(){
$(‘boxExample’).fade({ duration: 3.0});
}
Abbiamo comunicato alla funzione che la durata dell’effetto deve essere di 3 secondi.
Framework Scriptaculous: Effect.ScrollTo
Molti siti si servono dello smooth scrolling, un effetto molto carino che permette di scrollare in verticale o in orizzontale tutta la pagina web, per passare da un elemento all’altro della pagina: grazie a scriptaculous puoi ottenere questo effetto con una sola riga di codice:
function scroll(elemento)
{
Effect.ScrollTo(elemento);
}
Al posto di elemento possiamo inserire nel link al quale associamo l’effetto, l’id dell’elemento al quale desideriamo arrivare con lo scrolling morbido:
<a href="#" onclick=”scroll(‘boxExample’)”>Clicca qui per attivare l'effetto</a>
Nel nostro style.css diamo delle coordinate assolute al nostro div boxExample: in questo caso lo stiamo posizionando ad una distanza di 2000 pixels dall’inizio della nostra pagina.
#boxExample
{
position:absolute;
top: 2000px;
left:40px;
width: 50px;
height: 50px;
background-color: #ce665f;
border: 2px solid #000;
}
A questo punto semplicemente cliccando sul nostro link, verrai accompagnato dall’effetto fino al boxExample, ovunque esso sia!
Il risultato puoi vederlo qui sotto la voce Effect.ScrollTo.
Le proprietà della funzione: Effect.ScrollTo
Effect.ScrollTo ha la seguente proprietà:
- duration (la durata dell’effetto espressa in secondi).
Volendo aggiungere la proprietà duration alla nostra funzione:
function scroll(){
Effect.ScrollTo('boxElement' , { duration: 3.0});
}
Abbiamo comunicato alla funzione che la durata dell’effetto deve essere di 3 secondi.
Conclusioni
Si possono implementare tanti effetti anche senza essere un “guru” della programmazione, è uno dei punti di forza dei frameworks javascript. Puoi trovare a questo indirizzo una gamma ben assortita di effetti a questo indirizzo, con spiegazioni ed esempi.
Nella prossima lezione vedremo come implementare effetti più complessi, magari meno pirotecnici, ma molto utili.
Sperimenta pure con tutti questi effetti, ma mi raccomando senza esagerare! Uno dei trend del 2010 è la sobrietà!
Altri articoli di questa guida:
)
Web designer, cerca l'ispirazione in ogni oggetto che lo circonda. Specializzato nella creazione di layout per Wordpress è sempre alla ricerca del framework javascript più cool, del social network più in voga, del design più innovativo... Genere musicale? Lounge...
Sito web dell'autore | Altri articoli scritti da Ivan Signorile
Potresti essere interessato anche ai seguenti articoli:
-
Script.aculo.us: tanti effetti con poco codice? | Your Inspiration Web
[...] Script.aculo.us: primi effetti di base [...]
Ciao Ivan, complimenti.. con questi articoli mi hai fatto avvicinare a questa libreria che fino a poco tempo fa mi era quasi sconosciuta.. devo dire che dopo aver visto la sua implementazione nel sito di gucci sono rimasto impressionato.. complimenti ancora.
Ciao Nicolas,
grazie per i complimenti e quanto agli effetti, credimi ce ne sono davvero tanti.
E poi scriptaculous la trovo veramente veramente facile da usare!!!
C’è una terza lezione: quindi come per la lezione precedente ti invito a seguire anche la prossima
molto interessante, mi serviva proprio una funzione per lo smooth scroll
una domanda, funziona in qualsiasi parte mettiamo l’elemento verso cui effettuare lo scroll, anche in orizzontale?
Ciao Luca,
allora: nativamente script.aculo.us non prevede lo smooth scroll orizzontale, tuttavia ci sono script modificati che ti permettono di ottenere questo risultato utilizzando scriptaculous.
Sinceramente userei il fly-over-background di Mootools per lo scroll orizzontale, anche perché Mootools prevede lo scroll della pagina anche in obliquo, cosa che trovo fantastica.
Come in un commento epico di Just il bello di queste librerie è che ce n’è per tutti i gusti e le esigenze…
Chissà se non affronteremo il capitolo Mootools in una prossima lezione!
Grazie, quindi se ci sono già le funzioni do un occhiata a mootools, utilissimo come sempre, aspetto con ansia il prossimo articolo!!
Hi, as you can see this is my first post here.
In first steps it is really nice if someone supports you, so hope to meet friendly and helpful people here. Let me know if I can help you.
Thanks in advance and good luck!
Hi ibelouis,
glad to have your appreciation and your helpfulness.
Every single article we wrote, btw is on the english version of our blog!
Check it out at http://www.yourinspirationweb.com/en!
Have a nice time on YIW!