Recreate Apple’s Retina display with this awesome tutorial! Thanks to web developer Martin Angelov, he designed a fully functional Apple-like Retina effect using the jQuery library.

Below are the steps on how to achieve this effect.

1. XHTML

The markup is pretty much straight forward and has few divs and images.

<div id="main">

<div id="iphone">

<div id="webpage">

<img src="img/webpage.png" width="499" height="283" alt="Web Page" />

<div id="retina"></div>

</div>

</div>

</div>

This is a simulation of what you will achieve with the above code.

2. CSS

This is the styling for the retina divs, iPhone and webpage effect.

Styles.css

#iphone{
        /* The iphone frame div */
        width:750px;
        height:400px;
        background:url('img/iphone_4G.png') no-repeat center center;
}
#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;
}

3. jQuery

script.js

$(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');
        });
});

Angelov also provided a zip file which you may download here.

Incoming search terms for the article:

• jquery apple
• jquery apple effect
• retina chrome
• jquery zap-effect
• apple retina effect
• divs
• jquery retina effect
• jquery zip code radius search
• jquery apple retina effect
• jquery zip effect