<h1>Just scroll!</h1>
<div class="intro mac"></div>
<div id="mac" class="mac"></div>
<div class="content">
<h2>Apple iMac scrolling effect.</h2>
<p>
iMac 27" mockup by <a href="https://dribbble.com/shots/438772-iMac-27-Fully-Scalable-PSD" target="_blank">Koy Carraway</a>.<br/>
Picture from <a href="http://wallwidehd.com">WallWideHD</a> - Transfagarasan.<br/>
Read more about Transfagarasan <a href="http://en.wikipedia.org/wiki/Transf%C4%83g%C4%83r%C4%83%C8%99an" target="_blank">here</a>.
</p>
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,800);
body {
color: #333;
font-family: Open sans;
}
h1 {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
text-align: center;
font-size: 52px;
z-index: 999;
color: rgba(255, 255, 255, 0.3);
}
.mac {
height: 613px;
width: 764px;
margin: 1340px auto 100px;
background: white url("http://i.imgur.com/AyELvGR.jpg") no-repeat 0 0;
-webkit-background-size: 764px 613px;
background-size: 764px 613px;
}
.mac.intro {
position: fixed;
width: 2548px;
height: 2052px;
-webkit-background-size: 100% auto;
background-size: 100% auto;
margin: 0;
top: 0;
left: 50%;
margin-top: -300px;
margin-left: -1274px;
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
}
.content {
width: 500px;
margin: 0 auto 150px;
}
.content h2 {
font-size: 52px;
line-height: 1.0865;
font-weight: 300;
margin-bottom: 48px;
}
.content p {
font-size: 18px;
margin: 1em 0 0 0;
line-height: 1.8;
color: #555;
font-weight: 400;
}
.content p a {
color: #555;
text-decoration: underline;
}
function setTransform(el, transf) {
el.css('transform', transf);
el.css('-moz-transform', transf);
el.css('-webkit-transform', transf);
el.css('-o-transform', transf);
el.css('-ms-transform', transf);
}
$(document).ready(function() {
var el = $('.intro'),
mac = $('#mac'),
offset = mac.offset();
windowHeight = $(window).height();
$(window).scroll(function() {
$('h1').fadeOut(500);
var windowTop = $(window).scrollTop(),
scrollPercent = (offset.top - windowTop) / offset.top,
scale = 'scale(' + scrollPercent + ')';
setTransform(el, scale);
if (windowTop >= 940) {
el.hide();
} else {
el.show();
}
});
});