HTML
<header class="intro">
<h1>iMac</h1>
<p>First. 5k Display.</p>
<span class="arrow"></span>
</header>
<div class="wrapper">
<section class="imac-scrolling">
<div class="imac-container">
<figure class="retina-imac"></figure>
</div>
<div class="text-content">
<h1>The vision is brighter than ever.</h1>
<p>A desktop experience that draws you in and keeps you there. This is the idea behind today’s iMac. And now that idea is more powerful than ever. The new iMac is packed with all-new processors, the latest graphics technologies, innovative storage, and higher-bandwidth connectivity. And it all comes to life on the brightest and most colorful Retina display iMac has ever seen. So you get an even more immersive experience — and a scintillating new way to take it all in.</p>
</div>
<div class="text-content">
<h1>OS X Yosemite. The world’s most advanced desktop operating system.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consequuntur consectetur ipsam sit aspernatur tenetur natus enim voluptates fuga ea eius fugit vero esse nesciunt delectus eveniet, error, nihil earum?</p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero illo voluptatum, eos magni illum quaerat, cupiditate tenetur commodi. Architecto nobis blanditiis expedita quae error voluptatem quaerat deleniti itaque fugiat mollitia?</span><span>Facere est fugit natus earum quod eaque corrupti similique, accusantium aliquid magnam voluptatem, minus consequatur ut ratione nostrum libero quia nisi at veniam, officia reprehenderit! Culpa libero, id quos tempora.</span></p>
<a href="">Action Link ></a>
</div>
<div class="text-content">
<h1> The world’s most advanced desktop operating system.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consequuntur consectetur ipsam sit aspernatur tenetur natus enim voluptates fuga ea eius fugit vero esse nesciunt delectus eveniet, error, nihil earum?</p>
<a href="">Action Link ></a>
</div>
<div class="text-content">
<h1>Our best built-in apps. The best they’ve ever looked.OS X Yosemite.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consequuntur consectetur ipsam sit aspernatur tenetur natus enim voluptates fuga ea eius fugit vero esse nesciunt delectus eveniet, error, nihil earum?</p>
<a href="">Action Link ></a>
</div>
</section>
</div>
<footer></footer>
SCSS
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:600');
// Start iMac section
.text-content {
width:50%;
padding-left:5%;
margin-left:50%;
padding-top:200px;
z-index:1;
position:relative;
min-height:200px;
}
.imac-scrolling {
position:relative;
padding-bottom:100px;
}
.imac-container {
position:absolute;
top:0;
z-index:1;
height:100%;
&.fixed {
position:fixed;
top:1px;
}
}
.retina-imac {
background: url('https://www.apple.com/v/imac-with-retina/a/images/overview/apps_start_large_2x.jpg');
display:block;
position:absolute;
height:1494px;
width:766px;
margin:0;
padding:0;
background-size: 766px 1494px;
position:absolute;
margin-left:-253px;
top:0;
bottom:auto;
&.fixed {
position:fixed;
top:1px;
}
}
// Defaults & Typography
* {
box-sizing:border-box;
}
body {
color:#333;
}
a {
color:#08c;
text-decoration:none;
}
p {
font-size: 16px;
font-weight:100;
line-height:1.45em;
}
h1 {
font-family:'Source Sans Pro', sans-serif;
font-weight:100;
font-size:3em;
}
.wrapper {
width:900px;
margin:0 auto;
max-width:100%;
}
// Arrow
.arrow {
display:inline-block;
position:relative;
margin:0 auto;
margin-top:80px;
height:100px;
width:100px;
&:before, &:after {
content:"";
position:absolute;
bottom:0;
left:0;
width:50px;
height:1px;
background-color:black;
display:block;
transform-origin:right bottom;
transform: rotate(140deg);
}
&:after {
transform: rotate(40deg);
}
}
.intro {
min-height:300px;
text-align:center;
margin-top:100px;
h1 {
font-size:8em;
margin-bottom:0;
line-height:.65em;
}
p {
text-transform:uppercase;
letter-spacing:.1em;
}
}
footer {
height:1000px;
display:block;
background-color:rgba(black,.1);
}
JAVASCRIPT
var scrollPos, sectionHeight, imgWrapStop,
scrollSection = $('.imac-scrolling'),
imac = scrollSection.find('.retina-imac'),
imacWrap = $('.imac-container'),
imacOffset = imac.offset().top,
$window = $(window);
setVars = function(){
scrollPos = $window.scrollTop();
sectionHeight = scrollSection.outerHeight();
imgWrapStop = ((imacOffset + sectionHeight) - (imac.outerHeight()));
}
toggleFixed = function(img, imgWrap, imgTop){
var isFixed = scrollSection.hasClass('fixed');
if (scrollPos >= imgTop && !isFixed && scrollPos <= imgWrapStop) { // When we're in the zone
imgWrap.addClass('fixed');
img.css({
top:0,
bottom: 'auto'
});
} else if (scrollPos >= imgWrapStop) { // when we're out of the zone
img.css({
bottom:0,
top: 'auto'
});
imgWrap.removeClass('fixed');
} else {
imgWrap.removeClass('fixed');
}
}
translateScroll = function(selector, value, startPos, endPos) {
if (scrollPos > startPos && scrollPos < endPos) { // Only run if we're in the zone
var disToScroll = (startPos - endPos),
disScrolled = (scrollPos - startPos), // Distance already scrolled
transY = ((value / disToScroll) * disScrolled ),
transYround = +transY.toFixed(2),
transCss = 'translate3d( 0, ' + transYround +'px, ' + '0)';
function prefixTransform(selector, translate) {// prefixer function
selector.css('transform', translate);
selector.css('-moz-transform', translate);
selector.css('-webkit-transform', translate);
selector.css('-o-transform', translate);
selector.css('-ms-transform', translate);
}
prefixTransform(selector, transCss);
}
}
scrollFix = function(){
window.requestAnimationFrame(function(){
setVars();
toggleFixed(imac, imacWrap, imacOffset);
translateScroll(imac, 50, imacOffset, imgWrapStop);
});
}
init = function(){ scrollIntervalID = setInterval(scrollFix, 10);}
init();
