<div class="header" id="top">
<h1>Scroll Down</h1>
<i class="fa fa-angle-down animated bounce"></i>
</div>
<div class="section animate">
<div class="middle">
<img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
<div class="left title">
<div class="content">
<h2>A glorious nature shot.</h2>
<p>Wow. What a wonderful image. And look! there are even more images on the right side. Amazing. If you click below, I bet you'll get teleported to a magical land.</p>
<a href="#" class="btn-primary">Learn more</a>
</div>
</div>
<div class="right tiles">
<img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
</div>
<div class="section">
<div class="middle">
<img src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
<div class="right title">
<div class="content">
<h2>Check out this guy.</h2>
<p>What an interesting looking person! I wonder if they've ever climbed Mount Everest, or seen the Egyptian Pyramids. If not, I hope that one day they get to. You go random stock image person! Follow your dreams!</p>
</div>
</div>
<div class="left tiles">
<img src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
</div>
<div class="section">
<div class="middle">
<img src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
<div class="left title">
<div class="content">
<h2>That is one pretty building.</h2>
<p>I once thought about becoming an architect. I wanted to create a house fit for a king. But then I failed maths. So I became a frontend developer instead.</p>
</div>
</div>
<div class="right tiles">
<img src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
</div>
<div class="section">
<div class="middle">
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
<div class="right title">
<div class="content">
<h2>The future is now.</h2>
<p>Check out that technology! Imagine if we went back in time and put one of those in the hands of a neanderthal. Do you think they'd be impressed, or just try to club us to death?</p>
</div>
</div>
<div class="left tiles">
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
</div>
<div class="footer">
<a href="#top" class="scrollTo"><i class="fa fa-angle-up animated bounce"></i></a>
<h1>Scroll Up</h1>
</div>
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
@mixin transition {
-moz-transition: 0.3s ease-in-out all;
-o-transition: 0.3s ease-in-out all;
-webkit-transition: 0.3s ease-in-out all;
transition: 0.3s ease-in-out all;
}
@mixin filter($filter) {
-webkit-filter: $filter;
-moz-filter: $filter;
-o-filter: $filter;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:300,900);
$sm: 480px;
$md: 768px;
$lg: 992px;
body {
font-family: 'Roboto', sans-serif;
}
.header, .footer {
//height: 350px;
background: #2e2e2e;
color: #fff;
padding: 30px;
text-align:center;
a {
color: #fff;
}
//box-sizing: border-box;
@media (min-width: $md) {
padding: 100px 30px;
}
h1 {
font-size: 4em;
font-weight: 300;
}
i.fa {
font-size: 4em;
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
}
.section {
width: 100%;
position: relative;
//height: 300px;
.left, .middle, .right {
width:100%;
display: block;
color: #fff;
box-sizing: border-box;
left: 0;
padding: 30px;
text-align:center;
overflow:hidden;
@include transition;
.content {
@media (min-width: $sm) {
@include vertical-align();
}
}
@media (min-width: $sm) {
width: 50%;
font-size:0.9em;
padding: 10px;
left: 0;
float: left;
position: absolute;
}
@media (min-width: $md) {
width: 33.33333%;
left: 33.33%;
padding: 10px;
}
@media (min-width: $lg) {
padding: 30px;
font-size: 1em;
}
}
&.animate {
.left {
left:0;
@media (min-width: $sm) {
left: 50%;
}
@media (min-width: $md) {
left:0;
}
}
.right {
left:0;
@media (min-width: $sm) {
left: 50%;
}
@media (min-width: $md) {
left:66.66%;
}
}
}
.title {
background: tomato;
h2 {
margin-top:0;
}
p {
line-height:1.55em;
margin-bottom: 0.75em;
}
.btn-primary {
color: #fff;
background: darken(tomato, 10%);
padding: 10px;
text-decoration:none;
border-radius: 3px;
display:inline-block;
@include transition;
&:hover {
background: darken(tomato, 15%);
}
}
}
.tiles {
padding:0;
background: #fff;
clear:both;
display:none;
float:none;
img {
width:50%;
float:left;
height:auto;
opacity: 0.7;
@include transition;
@include filter(grayscale(100%));
&:hover {
opacity:1;
@include filter(grayscale(0%));
}
}
@media (min-width: $md) {
display:block;
}
}
.middle {
background: slategray;
z-index: 2;
padding:0;
img {
width: 100%;
height: auto;
display:block;
}
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-20px);}
60% {-webkit-transform: translateY(-10px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-20px);}
60% {transform: translateY(-10px);}
}
View Compiled
$(document).ready(function(){
var $sm = 480;
var $md = 768;
function resizeThis() {
$imgH = $('.middle img').width();
if ($(window).width() >= $sm) {
$('.left,.right,.section').css('height', $imgH);
} else {
$('.left,.right,.section').css('height', 'auto');
}
}
resizeThis();
$(window).resize(function(){
resizeThis();
});
$(window).scroll(function() {
$('.section').each(function(){
var $elementPos = $(this).offset().top;
var $scrollPos = $(window).scrollTop();
var $sectionH = $(this).height();
var $h = $(window).height();
var $sectionVert = (($h/2)-($sectionH/4));
if (($elementPos - $sectionVert) <= $scrollPos && ($elementPos - $sectionVert) + $sectionH > $scrollPos) {
$(this).addClass('animate');
} else {
$(this).removeClass('animate');
}
});
});
$('.btn-primary').click(function(){
alert('I lied');
});
});
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
