Dividere le immagini in CSS e jQuery

jQueryTutorial

Oggi vi presento uno script in CSS e jQuery che ci permette di dividere le immagini in più parti in base alla modalità selezionata sfruttando una sola proprietà CSS:  background-position.

Il risultato che andremo a ottenere sarà il seguente
demo

Andiamo a mostrare il codice HTML  

<div id="imm_divisa">
<ul>
</ul>
<div id="mode">
<div class="mode" id="griglia">Griglia</div>
<div class="mode" id="verticale">Verticale</div>
<div class="mode" id="orizzontale">Orizzontale</div>
</div>
</div>
</div>
<div id="footer">
<div id="imgs">
<ul>
<li><img src="Pearly Water.jpg" /></li>
<li><img src="Retina-Wallpapers-008.jpg" /></li>
<li><img src="6999573235_543d2e6b12.jpg" /></li>
<li><img src="Retina-Wallpapers-007.jpg" /></li>
</ul>
</div>
</div>


Creata la pagina HTML andiamo a gestire il foglio di stile con il seguente codice

html,body{
margin:0; padding: 0;
height: 100%;
text-align:center;
}
#wrap {height: auto; min-height: 100%;}
ul{
position:relative;
list-style:none;
}
#imm_divisa{
text-align:start;
min-height:100%;
height:100%;
height:auto !important;
padding-bottom:290px;
padding-top:40px;
}
#footer{
width:100%;
text-align:center;
position: relative;
/* valore negativo dell'altezza del footer */
margin-top: -290px;
height: 280px;
clear:both;
}
#imm_divisa ul{
width:490px;
height:490px;
margin-left:auto;
margin-right:auto;
margin-top:30px;
text-align:center;
}
#imm_divisa ul li{
display:inline-block;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-right:20px;
margin-top:20px;
}
.block{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-color:#32281c;
}
#footer ul li{
display:inline-block;
width:166px;
height:166px;
margin-right:50px;
margin-top:40px;
border:5px solid #443726;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#footer ul li img{
width:166px;
height:166px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
opacity:0.7;
}


Impostato il foglio di stile andremo a creare il codice jQuery per impostare le animazioni. Quest'ultimo codice sarà visibile nel prossimo articolo ...

Fonte articolo:
ketek.altervista.org 

Autore

Sono Carlo Ventrella, studente e appassionato di programmazione, particolarmente interessato allo sviluppo di applicazioni e script per il web. Linguaggi attualmente conosciuti: C,Java, Javascript, css, css3, php e html5.

Sito web dell'autore