Script.aculo.us: primi effetti di base

effetti-scriptaculous

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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:

  1. Script.aculo.us: tanti effetti con poco codice.
  2. Script.aculo.us: primi effetti di base
  3. Script.aculo.us: effetti avanzati, ma ancora poco codice!
Tag: , ,

L'autore

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

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

10 commenti

Trackback e pingback

  1. Script.aculo.us: tanti effetti con poco codice? | Your Inspiration Web
    [...] Script.aculo.us: primi effetti di base [...]
  2. Notizie dai blog su Effetti Javascript sulle immagini
    [...] Script.aculo.us: primi effetti di base Nella  prima lezione su  script.aculo.us hai avuto modo di vedere come può essere facile…
  3. MILO MANARA e gli ALTRI Artisti der FUMETTO...
    [...] [...]