Oggi vogliamo creare un effetto retina in jQuery per leggere i contenuti dentro un iPhone.
Iniziamo subito.
CODICE HTML
La spina dorsale del progetto e’ molto semplice, abbiamo solo alcuni DIV e un’immagine.
Effetto retina su immagini in jQuery | iwebdesigner demoEffetto retina su immagini in jQuery
Leggi il tutorial su iwebdesigner »
Il DIV #iphone visualizza l’immagine dell’iPhone. AL suo interno c’e’ un’altro DIV #webpage che altro non e’ che lo screenshot del nostro sito. Infine abbiamo il DIV #retina, i cui angoli vengono arrotondati con i CSS3, e visualizza in grande il contenuto dello screenshot al massaggio del mouse.
IL CODICE CSS
Dobbiamo dare un’occhiata allo stile dei DIV #iphone, #webpage e #retina.
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
body{
font-size:14px;
color:#666;
background:url('img/demo_bg.jpg') no-repeat center top #111;
font-family:Arial, Helvetica, sans-serif;
}
#iphone{
/* The iphone frame div */
width:750px;
height:400px;
background:url('img/iphone_4G.png') no-repeat center center;
position:relative;
}
#webpage{
/* Contains the webpage screenshot */
width:499px;
height:283px;
position:absolute;
top:50%;
left:50%;
margin:-141px 0 0 -249px;
}
#retina{
/* The Retina effect */
background:url('img/webpage.png') no-repeat center center white;
border:2px solid white;
/* Positioned absolutely, so we can move it around */
position:absolute;
height:180px;
width:180px;
/* Hidden by default */
display:none;
/* A blank cursor, notice the default fallback */
cursor:url('img/blank.cur'),default;
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-webkit-box-shadow:0 0 5px #777;
box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
/* CSS3 rounded corners */
-moz-border-radius:90px;
-webkit-border-radius:90px;
border-radius:90px;
}
#retina.chrome{
/* A special chrome version of the cursor */
cursor:url('img/blank_google_chrome.cur'),default;
}
#main{
/* The main div */
margin:40px auto;
position:relative;
width:750px;
}
/* The styles below are only needed by the demo page */
h1{
padding:30px 0;
text-align:center;
margin:40px 0 30px;
font-size:44px;
color:white;
font-weight:normal;
}
h2{
font-weight:normal;
text-align:center;
}
h1,h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
p.credit{
text-align:center;
margin:50px;
}
p.credit a{
color:#707070;
font-size:10px;
text-decoration:none;
border-bottom:1px dotted;
}
p.credit a:hover{
border:none;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
a img{
border:none;
}
Dando come posizione assoluta al DIV #webpage riusciamo a centrare lo screenshot dentro all’iphone. Anche il DIV #retina ha una posizione assoluta ed ha come sfondo il DIV #webpage, in maniera tale che il movimento del DIV crea l’illusione di ingrandire l’immagine piccola sottostante.
Il #retina ha anche un confine delimitato che e’ esattamente la meta’ della sua larghezza a forma di cerchio. Con l’elemento #retina.chrome e l’immagine blank.cur eliminiamo la visione del cursore del mouse all’interno del nostro iphone.
IL CODICE JQUERY
Non e’ altro che un codice JavaScript con l’aiuto della libreria jQuery.
$(document).ready(function(){
/* This code is executed on the document ready event */
var left = 0,
top = 0,
sizes = { retina: { width:190, height:190 }, webpage:{ width:500, height:283 } },
webpage = $('#webpage'),
offset = { left: webpage.offset().left, top: webpage.offset().top },
retina = $('#retina');
if(navigator.userAgent.indexOf('Chrome')!=-1)
{
/* Applying a special chrome curosor,
as it fails to render completely blank curosrs. */
retina.addClass('chrome');
}
webpage.mousemove(function(e){
left = (e.pageX-offset.left);
top = (e.pageY-offset.top);
if(retina.is(':not(:animated):hidden')){
/* Fixes a bug where the retina div is not shown */
webpage.trigger('mouseenter');
}
if(left<0 || top<0 || left > sizes.webpage.width || top > sizes.webpage.height)
{
/* If we are out of the bondaries of the
webpage screenshot, hide the retina div */
if(!retina.is(':animated')){
webpage.trigger('mouseleave');
}
return false;
}
/* Moving the retina div with the mouse
(and scrolling the background) */
retina.css({
left : left - sizes.retina.width/2,
top : top - sizes.retina.height/2,
backgroundPosition : '-'+(1.6*left)+'px -'+(1.35*top)+'px'
});
}).mouseleave(function(){
retina.stop(true,true).fadeOut('fast');
}).mouseenter(function(){
retina.stop(true,true).fadeIn('fast');
});
});
Nella funzione mousemove, le cordinate del mouse vengono passate come .pageX e .pageY e sono assolute in relazione alla pagina. Sottraendo la posizione dell’offset del sito si ottengono le coordinate relative per il mouse, che vengono usate per posizionare il DIV #retina. Tutto questo combinato con l’eliminazione del cursore del mouse, come fatto nel CSS, crea l’effetto retina con codice JavaScript puro e CSS.
Ecco fatto abbiamo realizzato un perfetto effetto retina, stile zoom, che possiamo utilizzare in svariati modi.
Alla prossima!