Flying memes

»

Effetto zoom con Scriptaculo.us e Layout Liquido

Combinando dimensioni in percentuali e l’effetto morph di Scriptacolous è possibile ottenere un simpatico effetto come questo:

« Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. »

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:

Hello!
$('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

Tags: , , ,