To simulate the light behavior I used a CSS3 gradient on the body background and a text-shadow property on the text. Both of these css3 attributes are then dynamically changed upon the user’s mouse move.

Here’s the snippet of the JQuery-flavored javascript I used:

$(document).ready(function() {
    $('body').mousemove(function(event) {
        $('#instructions').hide();

        // compute the center of the page and the distance between the center and the mouse
        // coordinates
        cx = Math.ceil($('body').width()  / 2);
        cy = Math.ceil($('body').height() / 2);
        dx = event.pageX - cx;
        dy = event.pageY - cy;

        // introducing a little parallax for the biggest light cone
        x0 = Math.ceil(cx - (dx * 0.2));
        y0 = Math.ceil(cy - (dy * 0.2));
        x1 = event.pageX;
        y1 = event.pageY;
        r0 = 300;
        r1 = 10;

        // another parallax for the text shadow
        sx = -dx * 0.03;
        sy = -dy * 0.03;

        // blur the shadow depending upon its distance
        b  =  (Math.abs(sx) + Math.abs(sy)) * 0.2;

        // simulate the light
        $('body').css('background-image', "-webkit-gradient(radial, " + x0 +" " + y0 +", "+ r0 +", "+ x1 +" "+ y1 +", "+ r1 +", from(#575757), to(#FFFFFF))");

        // simulate the shadow
        $('h1').css('text-shadow', "#444 "+ sx +"px "+ sy + "px " + b + "px");
    });
});

Here’s an image took from the demo, the whole page source code is available on my github account as a gist:

.

Come funziona? Bisogna istanziare un nuovo oggetto della classe GTileLayer e specificarne all’interno una funzione che, ricevuti due parametri (un oggetto GPoint e un numero indicativo del livello di zoom) sappia ritornarne l’immagine appropriata.

Nel prossimo articolo andrò un pò più nel dettaglio, per il momento vi lascio a questa proof-of-concept che potrebbe trasformarsi, a breve, nella gallery ufficiale del sito.

Effetto: zoom out e zoom in

Parte Prima, il layout:

La parte più difficile è sicuramente creare un layout al 100% liquido, per farlo ricordatevi che la percentuale espressa nel dimensionare un elemento si rapporta alla dimensione dell’elemento padre, quindi se all’interno di un contenitore di 760px ho due <div> una all’interno dell’altra ed entrambe di dimensione 50% la prima misurerà 760/2 = 380px e la seconda 380/2 = 190px.

Per quanto riguarda il testo vale quanto segue: la dimensione del font, se espressa in percentuale si rapporta alla dimensione del font del primo elemento padre espressa non in percentuale. Per fare un esempio: se nel mio box contenitore imposto font-size: 10px e all’interno di tale box utilizzo solo valori percentuali per il testo otterrò come risultato che tutto il contenuto testuale verrà rapportato a 10px secondo la percentuale specificata; quindi un font-size: 120% = 10*120/100 = 12px.

Parte Seconda, lo script:

Una volta completata la stesura del layout dovremmo trovarci con un box contenitore dimensionato con valori assoluti (sia per width che per font-size) contenente l’intero layout fluido. A questo punto modificando i valori del box contenitore otterremo una modifica proporzionale dell’intero layout.

Ma possiamo fare di più; la funzione Morph di Scriptaculo.us ci consente di creare una transizione animata tra due valori. Quindi ad esempio:

$('box').morph("width: 300px; font-size: 6px;"); - Esegui

Perfetto, quasi ci siamo, ora manca solo un modo per modificare queste due grandezze secondo un fattore di scala che le mantenga proporzionali, per fare questo è sufficiente creare un piccolo javascript:

Element.addMethods({
  magnify_string: function(element, sf) {
    dimensions = element.getDimensions();
    font_size  = ( element.getStyle('font-size') == null ? 16 : parseFloat(element.getStyle('font-size')));
    new_width  = ( dimensions.width  > 0 ? dimensions.width  : 1.0)*sf;
    new_size   = ( font_size > 0         ? font_size         : 1.0)*sf;
    return "width: " + new_width + "px; font-size: " + new_size + "px;";
  }
})

Questa funzione ritorna una stringa con altezza e font-size dell’elemento su cui è invocata modificati secondo un valore di scala da 0.0 a 1.0 (0 = 0% e 1 = 100%); tale stringa si presta benissimo quindi ad essere passata all’effetto Morph ottenendo come risultato quanto mostrato all’inizio di questo articolo; per completezza allego qui il codice dei pulsanti ‘zoom-in’ e ‘zoom-out’ presentati in precedenza:

/* Effetto zoom-out */
$('demo1').morph($('demo1').magnify_string(0.5));

/* Effetto zoom-in */
$('demo1').morph($('demo1').magnify_string(2));

Sandro Paganotti