Effetto degli occhi che si muovono seguendo il mouse.

Vado a illustrare un effetto molto carino che può essere installato sia in siti che trattano argomenti divertenti sia in blog un po' più seriosi ma che vogliono presentare ai lettori un tocco di sana dissacrazione. Si tratta di immagini di occhi stilizzati con le pupille che si muovono seguendo lo spostamento del mouse dei visitatori.

L'installazione è semplicissima visto che non occorre neppure intervenire sul modello. Si va su Layout > Aggiungi un gadget > HTML/Javascript, si incolla il codice e si salva. Successivamente si può posizionare al meglio l'elemento pagina. Se si usa ancora la vecchia Bacheca di Blogger bisogna andare su Design > Elementi pagina > Aggiungi un gadget > HTML/Javascript. Qui sotto ci sono i link che conducono a Google Documenti in cui ho pubblicato quattro pagine con i rispettivi codici per le quattro versioni dell'effetto. Come mia abitudine ho anche postato in rete delle demo di ciascun effetto.

1. Codice degli occhi che si muovono con il mouse - Prima versione -  Demo della prima versione -
2. Codice degli occhi che si muovono con il mouse - Seconda versione - Demo della seconda versione -
3. Codice degli occhi che si muovono con il mouse - Terza versione - Demo della terza versione -
4. Codice degli occhi che si muovono con il mouse - Quarta versione - Demo della quarta versione -

I vari codici possono anche essere inseriti all'interno di un post o di una pagina statica incollandoli in modalità HTML.

Si deve fare una sola ma importante personalizzazione. Nelle quattro pagine dei codici sono evidenziati di rosso due parametri: per esempio nel primo codice

left: 107px; e  left: 285px;

Determinano rispettivamente la posizione dell'occhio sinistro e di quello destro fissandone la distanza dal margine sinistro della pagina. Se quindi vogliamo modificare la posizione degli occhi occorre ricordarsi che a una variazione del primo parametro deve accompagnarsi anche una modifica del secondo di pari valore. Prendendo come esempio il primo codice possiamo per esempio sostituire i due tag precedenti con  left: 117px; e left: 295px; per allontanarli di altri 10 pixel dal margine sinistro.