Roll dock » Works http://blog.rollstudio.it/it/ Multimedia Design Fri, 26 Feb 2010 11:55:45 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 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 Donna è Web 2009, 7 nomination, 6 siti finalisti, 5 categorie! http://blog.rollstudio.it/it/2009/11/donna-e-web-2009-7-nomination-6-siti-finalisti-5-categorie/ http://blog.rollstudio.it/it/2009/11/donna-e-web-2009-7-nomination-6-siti-finalisti-5-categorie/#comments Thu, 19 Nov 2009 09:58:37 +0000 admin http://blog.rollstudio.it/?p=163 Roll Multimedia Design a Donna è Web!

dew

Di seguito le nomination:

EVENTI
Lara Belcastro http://comicsxafrica.org
Luisa Tatoli http://www.lasagradellacastagna.it

GIURIA GIOVANI
Lara Belcastro http://comicsxafrica.org
Luisa Tatoli http://www.silvianheachkids.it

IMPRESA/ECOMMERCE
Lara Belcastro http://www.zipdesign.co….uk

WEB AGENCY
Lara Belcastro http://www.rollstudio.it

WEB DESIGN
Lara Belcastro http://www.guiltypleasures.co.uk

DONNA E’ WEB:
DONNAéWEB è il riconoscimento nato nel 2004 per promuovere le professionalità femminili nel web. Un premio per valorizzare le donne che attraverso il web svolgono la propria attività nell’impresa, nel pubblico e nel no profit.

]]> http://blog.rollstudio.it/it/2009/11/donna-e-web-2009-7-nomination-6-siti-finalisti-5-categorie/feed/ 2 Sagra della Castagna http://blog.rollstudio.it/it/2009/09/sagra-della-castagna/ http://blog.rollstudio.it/it/2009/09/sagra-della-castagna/#comments Fri, 11 Sep 2009 19:31:54 +0000 admin http://blog.rollstudio.it/?p=133 logo

Un piccolo paese, vicino Montevergine, tranquillo, pittoresco con la sua Torre medioevale e i suoi abitanti serafici e operosi allo stesso tempo.

E ogni anno tutta la comunità summontese si mobilita per una serie di eventi, che vede coinvolti donne e uomini, ragazze e ragazzi, bambine e bambini, con uno spirito di comunità ormai dimenticato. Uno di questi eventi è la Sagra della Castagna, che quest’anno si terrà Domenica 18 Ottobre.

Il nostro modesto contributo ci ha coinvolti nella realizzazione della nuova identità visiva della sagra, insieme a un sito web pieno di informazioni, aggiornabili direttamente dagli organizzatori . Un contenitore che permette di raccogliere le testimonianze delle edizioni precedenti della Sagra, di promuovere la manifestazione, di divulgare il programma e di mettere a disposizione del pubblico tutte le informazioni utili.

Al progetto hanno dato il loro contributo, insieme ai soliti R.O.L.L., Antonella Polo per l’elaborazione definitiva del logo e Patrick Guido Arminio per l’impostazione dell’HTML/CSS.

Il logo riprende gli elementi tipici della castagna ed elaborati coi i colori evocativi di Summonte nel periodo dell’anno in cui si svolge la sagra, saturi e variegati, proprio come si mostra il paesaggio autunnale tipico di queste montagne, di grande impatto visivo.

Per il sito web volevamo proporre qualcosa di diverso dal solito, con un impianto originale e al tempo stesso funzionale. Parte della creatività è stata sacrificata a beneficio della compatibilità minima con Internet Explorer, l’unico browser che non ne vuole sapere di elaborare le sia pur minime possibilità offerte dal web (ancora troppo usato per poterlo ignorare, come sempre succede) costringendoci a rivedere il codice in più riprese.

Vi invitiamo a partecipare alla manifestazione, che si svolgerà Domenica 18 Ottobre 2009 naturalmente a Summonte (AV). Sul sito web tutte le informazioni e il programma.

Il sito si raggiunge al seguente indirizzo: http://www.lasagradellacastagna.it

Su Facebook è presente una pagina completamente dedicata all’evento.

E’ davvero una bella esperienza, non mancate!

studio_logo

]]> http://blog.rollstudio.it/it/2009/09/sagra-della-castagna/feed/ 0