Ecco uno di quei plugin che possono migliorare decisamente una pagina troppo statica o poco vivace, partendo da un’immagine centrale che ne apre altre a ventaglio, tramite il click o il rollover, con un’animazione circolare e di transizione alpha davvero gradevole. Vediamo come costruire la pagina nel dettaglio.
Mobilyblocks jQuery
Nel pacchetto in download in fondo all’articolo troviamo tutti i files organizzati nel corretto percorso. Richiamiamo i files Javascript nell’<head> per attivare il plugin:
<script src="js/demo.js" type="text/javascript"></script> <script src="js/mobilyblocks.js" type="text/javascript"></script> <script src="js/init.js" type="text/javascript"></script>
I tre files si trovano nella cartella “js”. Passiamo ai Css:
<meta name="keywords" content="mobily, blocks, circle, animation, list, jquery, plugin, css" /> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <link href="css/default.css" rel="stylesheet" type="text/css" />
Vediamo il Css “default”:
.wrap {
width:1000px;
margin:120px auto 0;
}
.socials {
display:block;
width:32px;
height:32px;
background:url(../img/share.png) no-repeat;
cursor:pointer;
position:relative;
}
.nature {
display:block;
width:150px;
height:150px;
background:url(../img/img1.png) no-repeat;
cursor:pointer;
position:relative;
}
.socials, .nature {
clear:both;
margin:0 auto;
z-index:2;
}
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
ul.reset li {
position:absolute;
}
ul.reset li a {
outline:none;
}
a img {
border:none;
}
La riga
background:url(../img/share.png) no-repeat;<br />
e la riga
background:url(../img/share.png) no-repeat;
indicano il percorso delle immagini centrali, che in questo caso indicano le due tipologie tematiche che sono “Social” e “Nature”. Per comodità abbiamo inserito tutte le immagini, comprese quelle che si apriranno in seguito al nostro intervento, nella medesima cartella: è tuttavia consigliabile, se si intende posizionare più oggetti animati nella stessa pagina, creare più cartelle per organizzare al meglio ogni gruppo.
Vediamo ora il Javascript che attiva gli esempi 1 e 2, dal file init.js. Il primo si apre tramite il click del mouse, mentre il secondo si attiva attraverso il rollover:
$(function(){
$('.socials').mobilyblocks();
$('.nature').mobilyblocks({
trigger: 'hover',
direction: 'counter',
duration: 500,
zIndex: 50,
widthMultiplier: 1.15
});
});
L’impostazione di default si trova sul file mobilityblock.js. Vediamo ora l’html, che funziona col tipico sistema di liste tramite <ul> e <li>, dove possiamo aggiungere i percorsi per i nostri link inserendoli negli <a href=”#”> che sono associati alle varie immagini.
<h3>Example 1</h3> <div class="socials"> <ul class="reset"> <li><a href="#"><img src="img/delicious.png" alt="" /></a></li> <li><a href="#"><img src="img/digg.png" alt="" /></a></li> <li><a href="#"><img src="img/google.png" alt="" /></a></li> <li><a href="#"><img src="img/stumbleupon.png" alt="" /></a></li> <li><a href="#"><img src="img/technorati.png" alt="" /></a></li> <li><a href="#"><img src="img/twitter.png" alt="" /></a></li> </ul> </div> <h3>Example 2</h3> <div class="nature"> <ul class="reset"> <li><a href="#"><img src="img/img2.png" alt="" /></a></li> <li><a href="#"><img src="img/img3.png" alt="" /></a></li> <li><a href="#"><img src="img/img4.png" alt="" /></a></li> <li><a href="#"><img src="img/img5.png" alt="" /></a></li> <li><a href="#"><img src="img/img6.png" alt="" /></a></li> <li><a href="#"><img src="img/img2.png" alt="" /></a></li> <li><a href="#"><img src="img/img3.png" alt="" /></a></li> </ul> </div>
Ed ecco la risorsa in download. La fonte proviene da playground.mobily. Alla prossima!
Pacman
Nostradamus
Magical Cat Adventure
Snake