jQuery Apple Retina Effect
Here's some awesome jQuery tutorials to Recreate Apple’s Retina display
with this awesome tutorial! Thanks to web developer Martin Angelov (http://tutorialzine.com), 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: http://demo.tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/demo.zip
No comments:
Post a Comment