Forked from Marius Balaj's Pen Apple's iMac scrolling effect.
A Pen by Captain Anonymous on CodePen.
Forked from Marius Balaj's Pen Apple's iMac scrolling effect.
A Pen by Captain Anonymous on CodePen.
<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> |
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); | |
} | |
$(function() { | |
var el = $('.intro'), | |
mac = $('#mac'), | |
offset = mac.offset(), | |
windowHeight = $(window).height(); | |
$(window).on('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(); | |
} | |
}); | |
}); |
@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; | |
backface-visibility: hidden; | |
} | |
.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; | |
} |