10 Effetti Javascript per migliorare il vostro sito

Arriva sempre il momento in cui vogliamo migliorare l’intefaccia visuale del nostro sito in modo tale da catturare l’attenzione degli utenti.Per fare ciò le opzioni di cui disponiamo sono sostanzialmente tre (dalla più difficile alla più facile): creare degli script per conto nostro, usare un framework JavaScript come ad esempio jQuery o mootools (il che facilita di molto la scrittura di codice) o infine usare degli script “pronti per l’uso” che funzionano con i framework esistenti o che magari l’autore ha creato da zero. Questo articolo è per coloro che scelgono di fare le cose un maniera un po’ più semplice o che non vogliono riscoprire l’acqua calda…

effetti javascript

Ecco quindi una collezione di 10 effetti JavaScript
potenti – ma pur sempre semplici da implementare creati per miglorare l’interfaccia del vostro sito. Questi sono stati scelti con la filosofia del “massimo rendimento con il minimo sforzo”, ovvero con lo scopo di ottenere maggiore impatto grafico con il minimo sforzo di installazione ed implementazione.

GreyBox

greyboxGreyBox permette di aprire altri siti in una finestra modale (come una pop-up, solo senza dover aprire un’altra finestra del browser). Ciò è molto utile per quando, ad esempio, vogliamo linkare più pagine web e non vogliamo che l’utente navighi al di fuori della nostra pagina o che la pop-up non venga bloccata dal pop-up blocker del vostro browser. Usare GreyBox è semplice e necessita di 3 passaggi descritti nel loro sito. Ecco alcune pagine riguardanti GreyBox:
pagina di Download, Documentazione, Esempi, Installazione, e Uso avanzato (per programmatori JavaScript più esperti, che spiega come estendere le funzionalità della libreria).

instant.js

instant jsL’effetto instant.js aggiunge dinamicamente un effetto Polaroid alle vostre immagini (ruota leggermente ed aggiunge un bordo bianco con una leggera ombreggiatura), simulando così la nota tecnica fotografica senza dover spendere tempo con programmi di fotoritocco come ad esempio Photoshop.
Questo espediente può essere utlizzato quando avete bisogno di applicare questo effetto su più immagini e non volete modificarle a mano (certo, potete sempre creare un batch process, ma ciò risulta veramente funzionale solo per semplici azioni come ad esempio resize di immagini, crop uniforme, ecc.).

mooTable

effetti-javascript-04.jpgmooTable permette di creare tabelle ordinabili (senza dover ricaricare la pagina) utilizzando DOM invece di richiederne nuovamente i dati. L’implementazione è semplice così come configurare l’ordinamento dei campi delle tabelle.
Questa libreria necessita del framework mootools, che può essere scaricato qui. Potete anche trovare un post nel forum di mootools creato dall’autore di mooTable, con dei feedback di altri sviluppatori di mootools.

FancyForm

FancyFormFancyForm sostituisce i soliti e noiosi controlli dei form come ad esempio i checkbox e i radio button, con altri molto più gradevoli. L’implementazione base è composta da due passaggi: (1) includere i files JavaScript nella pagina e (2) assegnare ai vostri controlli del form per checkbox: class="checked" oppure class="unchecked" e per i radio button: class="selected" oppure class="unselected". Decisamente seplice.
Anche questo script necessita di mootools (ed è stato sviluppato a partire dalla versione 1.1)

image menu

image menuimage menu, sviluppato da phatfusion, è un gradevole menù orizzontale che espande i suoi elementi (in questo caso immagini) al semplice passaggio del mouse.
Potete usarlo per visualizzare un montaggio di immagini che inizialmente risultano parzialmente nascoste, ma che possono essere rese completamente visibili passandoci sopra con il mouse.
Anche questo script necessita di mootools (ed è stato sviluppato a partire dalla versione 1.1)

AmberJack: Site Tour Creator

AmberJack: Site Tour CreatorEcco una libreria JavaScript molto leggera che vi permetterà di creare dinamicamente un “tour” del vostro sito, dando la possibiltà agli utenti di visitare pagine chiave del vostro sito in tempo reale con una piccolo box descrittivo in ciascuna pagina.
Questo permette agli utenti di fare un tour delle varie sezioni del sito, senza dover utilizzare ad esempio un menù statico in flash o qualche altro metodo. Come funzionalità extra, potrete scaricare numerose “skin” o addirittura potrete crearne una voi stessi, così da poterlo adattare alla grafica del vostro sito. Qui è presente una gallery di skin così potrete subito cercare uno stile che si adatti al vostro sito.

ImageFlow

ImageFlowChiaramente ispirato dal famoso effetto “coverflow” di iTunes, ImageFlow è un semplice effetto che visualizza una collezione di immagini che l’utente può scrollare usando una scrollbar presente sotto le immagini. Sviluppatori avanzati hanno anche la possibilità di modificare lo script in modo da migliorare o adattare il comportamento dello slider.
Quando un utente fa click su un’immagine, questa fa una redirect su un’altra pagina contenente l’immagine cliccata, quindi una buona idea potrebbe essere quella di usare questo script in congiunzione con un altro che permetta di vedere l’immagine in una finestra modale (come ad esempio da questo hack di ImageFlow)

ShadowBox.js Media viewer

ShadowBoxShadowBox è “un visualizzatore di media completamente scritto in JavaScript, cross-browser, cross-platform, chiaro, leggero e pienamente documentato
Cosa distingue ShadowBox da una pletora di altre finestre modali come Lightbox 2, è il supporto ad altri tipi di file oltre alle immagini, come ad esempio video in flash, video embedded di YouTube, Trailers di Apple.com e pagine web (una pagina do Login, ad esempio, che risparmierebbe all’utente di passare ad un’altra pagina per effettuarlo). Insomma, uno script per cui varrebbe la pena di provarlo e giocarci un po’.

TJPzoom 3 – ingranditore di immagini

TJPzoomTJPzoom permette di effettura lo zoom di determinate porzioni di un’immagini ad alta risoluzione. Tenendo premuto il bottone del mouse e trascinandolo su o giù è possibile incrementare o decrementare il livello di zoom.
Un modo di impiego di TJPzooom è ad esempio quello di scalare delle immagini ad alta risoluzione in modo che stiano nella vostra pagina per permettere poi agli utenti di effettuare lo zoom di queste.

mootools Tips

mootools Tipsmootools Tips è parte del framework di mootools che permette di configurare il modo in cui vengono visualizzati i tooltip; quando un utente passa sopra un link o un’immagine con il mouse, compaiono informazioni addizionali riguardanti l’oggetto.
Alcune opzioni che si possono ottimizzare sono: gli stili CSS (per fare in modo che i tooltip siano graficamente diversi dal testo bianco con sfondo nero che è lo stile di default), velicità di transizione. stile con cui il tooltip compare si schermo e il tempo che il tooltip impiega a comparire. Come accennato, questo necessita del framework mootools per funzionare.

24 thoughts on “10 Effetti Javascript per migliorare il vostro sito”

  1. Sono certo che i vostri commenti faranno molto piacere a Lerio, e mi aggiungo ai ringraziamenti per questa ottima lista!… o ringrazio anche per il contributo, di sicuro valore, che potrà donare a questo blog.

    Con l’occasione, per distinguere meglio l’autore dell’articolo, è stata aggiunto un piccolo avatar infondo all’articolo.

  2. tempo fa ho usato instant.js per il mio sito di fotografia. Trovo molto interessante shadowbox, è simile al lightwindow (a cui infatti è inspirata) che conoscevo già. Grazie per le segnalazioni!

  3. complimenti per il sito e l’articolo…

    tutto vramente molto bello, utile e ben fatto… a questo servono i blog! 🙂

  4. Ho testato lo script shadowbox con le google maps.

    per ogni marker vorrei associare un’immagine che viene caricata dallo shadowbox.

    non riesco a superare un problema nel passaggio della variabile dello scprit
    //var txt=”<a rel=’shadowbox’ href=’../Public/’ title=’ di ‘><img src=’http://www.apomezia.it/public/’ />“;

    con questo comando mi apre semplicemente la foto in una nuova pagina

    quanto sopra è visibile in http://www.apomezia.it/ungiro/dmappa.asp?id=7

    grazie

  5. Anzitutto grazie per i commenti, sono contento che molti abbiano apprezzato l’articolo come io continuo ad apprezzare il lavoro dei programmatori che continuano a sfornare nuove librerie / effetti sempre più compatibili e performanti. Con questo vi già anticipo che sono al al lavoro su altri articoli stuzzicanti.

    @ raf
    giustissimo: la condivisione è alla base della conoscenza.

    @ marco
    indica lo script che stai tentando di far funzionare, ma in linea di massima è sempre meglio affidarsi ai rispettivi how-to / forums per avere delle risposte certamente più esaustive.

    ciao!

  6. Ottima raccolta.
    Come hai fatto a trovare tutte queste librerie?
    Sono uno sviluppatore. Di design non sono molto afferrato però.
    Sto cercando una libreria come mootable. ne conosci altre ?

  7. Ciao Desmm,
    sai per caso se nelle ultime versioni di wordpress sia stato implementato qualcosa che inibisce l’instant.js?

    Da diverso tempo sul mio blog non funziona più, ora stavo provando a ripristinarlo ma non riesco. Ho provato anche a scaricare la versione aggiornata del JS ma niente…

    può essere dovuto dal tema utilizzato?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.