Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Apple's iMac scrolling effect
<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() {
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 + ')';
el.css('transform', scale);
if (windowTop >= 940) {
el.hide();
} else {
el.show();
}
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@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;
z-index:9999;
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment