• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida Homer che segue il mouse con gli occhi!

Antox C.

Utente Mitico
Autore del topic
21 Ottobre 2009
6.242
47
Miglior risposta
0
homer.jpg


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

eye.png


L’immagine di Homer senza occhi

homer-bg.png


L’immagine più piccola (che copre solo gli occhi) di Homer con gli occhi chiusi

eyes-closed.png


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:

var rag = Math.sqrt(Math.pow((x0-x),2)+Math.pow((y0-y)

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
 
Già! Effetto bellissimo, da fare anche con altri personaggi e con altre parti del corpo, così, per chi ha bisogno di svago. :emoji_smiley:
 
zingarelli.gif

Non vedo l'utilità di sprecare il tempo facendo queste cose che non ti danno niente

Allora che vieni a fare nella zona dell'HTML???
E poi,siamo ragazzi, è un passatempo quando non possiamo fare altro... -.-
Mai sentito parlare di relax? powa
 
Magari il ragazzo l'ha fatto per un lavoro per un sito o per uno scopo personale e l'ha postato. Bellissimo comunque.
 
Ma su windows 7 come bisogna fare? -.-
--------------- AGGIUNTA AL POST ---------------
Ou sto parlando con qualcuno o parlo a vuoto?
 
Ultima modifica: