Roll dock » effects http://blog.rollstudio.it Multimedia Design Fri, 26 Feb 2010 11:55:45 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Effetto “Color Switch” http://blog.rollstudio.it/it/2009/12/effetto-color-switch/ http://blog.rollstudio.it/it/2009/12/effetto-color-switch/#comments Thu, 03 Dec 2009 13:43:41 +0000 admin http://blog.rollstudio.it/?p=203 Per il sito www.lasagradellacastagna.it abbiamo sperimentato un effetto semplice ma divertente di contrasto tra background e immagini contenute nelle “celle” che riproponiamo in questo tutoral.

Abbiamo utilizzato l’ultima versione di jQuery (la 1.3.2) disponibile sul sito ufficiale.

Per prima cosa impostiamo un div vuoto alla fine del body, che ci servirà a contenere l’immagine ‘desaturata’.

<body>
<div id="overlay"></div>
</body>

Nel css imposteremo #overlay {display:none;} per nascondere al caricamento della pagina il contenuto del div.

Tramite il js aggiungiamo due immagini, una colorata e l’altra all’interno del div.

function prepare() {
$('body').prepend("<img class="bg" src="images/color.jpg" />");
$("#overlay").append("<img class="bg" src="images/sepia.jpg" />");
}

Adesso aggiungiamo le “celle” nell’html, ognuna di esse conterrà delle immagini (in bianco/nero e a colori), per creare un effetto come quello del sito di esempio.

Al mouse over sulla cella dovremo ottenere l’effetto di invertire le immagini di sfondo del body (da colorata a bianco/nero) e contemporaneamente mostrare l’immagine colorata all’interno della cella (da bianco/nero a colori). Inoltre abbiamo aggiunto un altro effetto (un “expose”) per accentuare la visibilità della cella che scatena l’evento, rendendo leggermente trasparenti le celle intorno.

Nell’HTML dunque avremo:

<div>
<div><img src="images/small_sepia.jpg" /></div>
<div><img src="images/small_color.jpg" /></div>
</div>

e nel js:

var cells = $('div.cell').hover(function () {
$('#overlay').show();
cells.not(this).css("opacity",0.8);
$(this).css({
zIndex: 1000
});
$(this).find("div.photo_sepia").hide();
$(this).find("div.photo_color").show();
}, function() {
$('#overlay').hide();
a = this;
$(a).css({
zIndex: 10
});
cells.css("opacity",1);
$(this).find("div.photo_color").hide();
$(this).find("div.photo_sepia").show();
});

Abbiamo dunque creato il nostro effetto saturazione, con poche semplici righe di codice.

Una demo è visibile qui: blog.rollstudio.it/demos/ColorSwitch.

Disponibili anche i file in download

]]> http://blog.rollstudio.it/it/2009/12/effetto-color-switch/feed/ 0