Creare lente di ingrandimento con jQuery – Effetto retina

effetto-retina-con-jquery

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 demo

Effetto retina su immagini in jQuery

Leggi il tutorial su iwebdesigner »

Demo www.iwebdesigner.it

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.