In questo articolo illustro il mio ultimo esperimento Javascript: creare Homer Simpson animato che segue con gli occhi il puntatore del mouse.
Naturalmente il nostro Homer non è disegnato da me, ho scelto infatti un immagine dal web che si potesse adattare al mio scopo, in particolare doveva essere frontale, Homer doveva aveva gli occhi più o meno circolari e sulla stessa altezza.
Il mio intento era quello di creare un personaggio che muovesse gli occhi verso il puntatore e, per rendere tutto più realistico, ogni tot secondi sbattesse gli occhi.
Per ottenere il risultato prefissato sono state utilizzate 3 immagini:
L’occhio, non è altro che un cerchio nero
L’immagine di Homer senza occhi
L’immagine più piccola (che copre solo gli occhi) di Homer con gli occhi chiusi
Il lato javascript è piuttosto lungo, spiegerò di seguito il suo funzionamento nelle sue parti essenziali:
Non appena la pagina viene caricata viene centrato homer nello schermo (sia in verticale che in orizzontale)
Quando il mouse si mouve lo script aggiorna la posizione degli occhi
Ogni 4 secondi, usando la funzione setInterval, il DIV che contiene gli occhi chiusi compare e scompare velocemente per dare l’illusione del battito
L’esempio è stato scritto usando un DIV principale con proprietà relative e i div contenuti in esso con proprietà absolute.
Ho incontrato alcune difficoltà iniziali, come ad esempio la scelta del metodo per far muovere gli occhi, ho risolto così:
Lo script calcola altezza e larghezza della pagina
Divide altezza e larghezza della pagina per la posizione del puntatore (altezza/posizione_y, altezza/posizione_x)
Moltiplica i risultati per le dimensioni degli occhi
In questo modo è come se all’interno degli occhi venissero riprodotti in scala l’area dello schermo e il cursore (rappresentato dalla pupilla).
Altra difficoltà incontrata è stata quella relativa al movimento degli occhi, come limitare il loro movimento ad un cerchio?
Per questo problema si può verificare che la distanza tra l’immaginario centro dell’occhio e la pupilla sia sempre minore del raggio dell’occhio, ricorrendo cioè alla formula di geometria analitica per calcolare il raggio che scritta in Javascript diventa:
In cui x0 e y0 sono le coordinate del centro, x e y della pupilla.
Questo esempio può essere anche usato come sfondo del vostro desktop, anche se forse ci sono piccoli problemi di risoluzione.
Per farlo su Windows: scaricate l’archivio dello sfondo dal bottone qui sotto -> click destro su zona vuota del desktop -> proprietà -> sfoglia -> nel secondo campo sotto il nome scegliere “Documenti HTML” -> scegliere la pagina occhi-homer.htm -> OK -> Applica -> OK.
Demo e Download qui in basso o vicino al titolo.
|
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
| | Perfavore,
Entra
oppure
Registrati
per vedere i Link!
|Fonte: matrixteo
Fonte demo: mia
si:
