Pochi Kb per effetti professionali
Mercoledì 11 Giugno 2008 - 08:11
di Riccardo Degni
Michael Leigeber continua a sfornare script molto interessanti dal peso a dir poco irrisorio. Dopo il menu ad accordion presentato qualche giorno fa, ecco a voi una soluzione da 2kb per creare tooltips con effetto fade.
Sempre dallo stesso autore ecco a voi lo Sliding Menu Highlight, un altro script stand alone dal peso di 1kb circa che permette di creare effetti di sliding su menu orizzontali.
L’implementazione del markup necessario tramite HTML è altrettanto semplice e leggera: per il funzionamento del secondo script, ad esempio, occore solamente creare una lista non ordinata ed un div che funge da “slide” all’interno di un div container.
<div class="menu"> <ul id="menu"> <li><a href="#">JavaScript</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">HTML</a></li> <li value="1"><a href="#">User Interface</a></li> <li><a href="#">CSS</a></li> </ul> <div id="slide"></div> </div>
Categoria: Scripting | Permalink
Commenti
1
Carini come effetti…
2
lo seguo da un pò, e devo dire che i suoi lavori sono sempre ottimi!! Utilizzo alcuni dei suoi script all’interno dell’applicazione intranet che sto sviluppando ed i risultati ottenuti a livello di user experience sono davvero strepitosi! come sempre ottima segnalazione ragazzi!
# - postato da Davide Espertini - 11 Giugno 2008 - 09:43
3
Sono molto favorevole, a volte si usano framework plugin per un totale di 80K quasi 100K per ridursi a semplici effettini.
Buono, nei siti quello che uso di sono Menu a tendina multilivello, effetti fade sui link e lightbox.
4
Avevo visto lo slider qualche giorno fa. Quel blog è da inserire tra i segnalibri.
5
per il tooltip: personalmente avrei adottato un’altra soluzione: questa, nonostante abbia una transizione gradevole, proprio non mi piace. L’implementazione di questo effetto si basa infatti su una funzione a cui viene passato il testo all’onmouseover. Di fatto il testo del tooltip è inaccessibile, perchè l’autore non ha pensato in termini di “inobtrusive code”.
E comunque, senza allontanarsi troppo dai 2kb, l’autore avrebbe potuto fare un detect di IE più affidabile e magari usare qualche accorgimento, ad es. la proprietà .cssText sui browser che lo supportano per la modifica programmatica degli stili. In questo modo si riducono le operazioni di repaint e di reflow da parte del browser.
Carino l’effetto del menu, peccato che il codice js richieda di essere decifrato un po’ se si vuole metterci mano (ad esempio per permettere istanze multiple dell’oggetto…) :)
# - postato da Fabrizio Calderan - 11 Giugno 2008 - 09:57
6
io quando vedo codice tipo questo:
document.onmousemove = this.pos;ci penso due volte … poiche’ e’ perfetto per eliminare qualunque altra funzione sia stata assegnata da altre librerie … ma anche dalle sue … quando ne fara’ altre che richiederanno l’evento onmousemove …
7
P.S. … per esempio scrivete nell’url questo, dopo aver visto una sola tooltip, ed addio script ^_^
javascript:(function(){document.onmousemove=function(){return false;}})();
8
per chi fosse interessato c’è anche questo, risalente a qualche anno fa, anch’esso molto leggero e facile da utilizzare.
9
Molto carini e semplici da implementare, grazie!
10
concordo con andr3a e fabrizio…c’è di meglio
# - postato da simone - 12 Giugno 2008 - 10:35
11
Bello, semplice, compatto. Molto utile per piccoli e grandi lavori. Complimenti!