<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="header row">
<div class="row__inner">
<h1>Thumbnail Animation Effects</h1>
<nav>
<ul>
<li><a href="#slide-down">Slide Down</a></li>
<li><a href="#jump-up">Jump Up</a></li>
<li><a href="#unfold">Unfold</a></li>
<li><a href="#step-by-step">Step by Step</a></li>
<li><a href="#border-fill">Border Fill</a></li>
<li><a href="#circle">Circle</a></li>
<li><a href="#bouncy">Bouncy</a></li>
<li><a href="#shake">Shake</a></li>
</ul>
</nav>
</div>
</div>
<div id="slide-down" class="row">
<div class="row__inner">
<h1>Slide Down</h1>
<div class="block to-left slide-down"></div>
<div class="block to-right slide-down"></div>
<div class="block from-center slide-down"></div>
</div>
</div>
<div id="jump-up" class="row">
<div class="row__inner">
<h1>Jump Up</h1>
<div class="block to-left jump-up"></div>
<div class="block to-right jump-up"></div>
<div class="block from-center jump-up"></div>
</div>
</div>
<div id="unfold" class="row">
<div class="row__inner">
<h1>Unfold</h1>
<div class="block to-left unfold"></div>
<div class="block to-right unfold"></div>
<div class="block from-center unfold"></div>
</div>
</div>
<div id="step-by-step" class="row">
<div class="row__inner">
<h1>Step by Step</h1>
<div class="block to-left step-by-step"></div>
<div class="block to-right step-by-step"></div>
<div class="block from-center step-by-step"></div>
</div>
</div>
<div id="border-fill" class="row">
<div class="row__inner">
<h1>Border Fill</h1>
<div class="block to-left border-fill"></div>
<div class="block to-right border-fill"></div>
<div class="block from-center border-fill"></div>
</div>
</div>
<div id="circle" class="row">
<div class="row__inner">
<h1>Circle</h1>
<div class="block to-left circle"></div>
<div class="block to-right circle"></div>
<div class="block from-center circle"></div>
</div>
</div>
<div id="zoom" class="row">
<div class="row__inner">
<h1>Zoom</h1>
<div class="block to-left zoom"></div>
<div class="block to-right zoom"></div>
<div class="block from-center zoom"></div>
</div>
</div>
<div id="bouncy" class="row">
<div class="row__inner">
<h1>Bouncy</h1>
<div class="block to-left bouncy"></div>
<div class="block to-right bouncy"></div>
<div class="block from-center bouncy"></div>
</div>
</div>
<div id="shake" class="row">
<div class="row__inner">
<h1>Shake</h1>
<div class="block to-left shake"></div>
<div class="block to-right shake"></div>
<div class="block from-center shake"></div>
</div>
</div>
<div class="footer row">
<div class="row__inner">
<h3>Yogev Ahuvia</h3>
<span><a href="https://twitter.com/kindofone/">@kindofone</a> | <a href="http://www.yogevahuvia.com/">www.yogevahuvia.com</a></span>
</div>
</div>
/* ------------------------ */
/* Variables */
/* ------------------------ */
/* ------------------------ */
/* Some Helper Mixins */
/* ------------------------ */
/* ------------------------ */
/* The Magic :) */
/* ------------------------ */
.slide-down {
transition: transform;
transition-duration: 200ms;
transition-timing-function: ease-out;
}
.slide-down:after {
content: "";
display: block;
position: absolute;
top: -400px;
width: 620px;
height: 400px;
background: #fff;
opacity: 0;
transition: opacity, transform;
transition-duration: 200ms;
transition-timing-function: ease-out;
pointer-events: none;
}
.slide-down:hover {
transform: translateY(200px);
}
.slide-down:hover.from-center {
transform: translateX(-50%) translateY(200px);
}
.slide-down:hover.from-center:after {
opacity: 1;
transform: translateX(-50%) translateY(200px);
}
.slide-down:hover:after {
opacity: 1;
transform: translateY(200px);
pointer-events: auto;
}
.jump-up:before, .jump-up:after {
content: "";
display: block;
position: absolute;
opacity: 0;
transition: opacity, transform;
transition-duration: 400ms;
transition-timing-function: ease-out, cubic-bezier(0.17, 0.67, 0.68, 3);
pointer-events: none;
}
.jump-up:before {
top: 200px;
width: 620px;
height: 400px;
background: #fff;
}
.jump-up:after {
top: 0;
width: 200px;
height: 200px;
}
.jump-up:hover.from-center:before, .jump-up:hover.from-center:after {
opacity: 1;
}
.jump-up:hover.from-center:before {
transform: translateX(-50%) translateY(-200px);
}
.jump-up:hover:before, .jump-up:hover:after {
opacity: 1;
pointer-events: auto;
}
.jump-up:hover:before {
transform: translateY(-200px);
}
.unfold {
transition: height;
transition-duration: 200ms;
transition-timing-function: ease-out;
}
.unfold:before, .unfold:after {
content: "";
display: block;
position: absolute;
top: -200px;
opacity: 0;
transition: transform, opacity, height;
transition-duration: 200ms;
transition-timing-function: ease-out, cubic-bezier(0.17, 0.67, 0.68, 3);
pointer-events: none;
width: 200px;
height: 200px;
}
.unfold.block.from-center {
background-size: cover;
background-position: top center;
}
.unfold.block.from-center:before {
left: -110px;
background-size: 620px;
background-position: top left;
}
.unfold.block.from-center:after {
left: 310px;
background-size: 620px;
background-position: top right;
}
.unfold.block.to-right {
background-size: cover;
background-position: top left;
}
.unfold.block.to-right:before {
left: 210px;
background-size: 620px;
background-position: top center;
}
.unfold.block.to-right:after {
left: 420px;
background-size: 620px;
background-position: top right;
}
.unfold.block.to-left {
background-size: cover;
background-position: top right;
}
.unfold.block.to-left:before {
right: 210px;
background-size: 620px;
background-position: top center;
}
.unfold.block.to-left:after {
right: 420px;
background-size: 620px;
background-position: top left;
}
.unfold.from-center:hover:before, .unfold.from-center:hover:after {
transform: translateX(-50%) translateY(200px);
}
.unfold:hover {
height: 400px;
}
.unfold:hover:before, .unfold:hover:after {
opacity: 1;
transform: translateY(200px);
height: 400px;
}
.unfold:hover:before {
transition-delay: 200ms;
}
.unfold:hover:after {
transition-delay: 400ms;
}
.step-by-step {
transition: height, width;
transition-duration: 200ms;
transition-delay: 0, 300ms;
transition-timing-function: linear, linear;
}
.step-by-step:hover {
width: 620px;
height: 400px;
}
.border-fill {
transition: height, width;
transition-duration: 200ms;
transition-delay: 0, 200ms;
transition-timing-function: ease-out;
border: 1px solid #fff;
}
.border-fill:after {
content: "";
position: absolute;
top: -1px;
width: 200px;
height: 200px;
background: #fff;
transition: height 200ms, width 200ms;
transition-delay: 200ms, 400ms;
}
.border-fill.to-left:after {
margin-right: -1px;
}
.border-fill.to-right:after {
margin-left: -1px;
}
.border-fill:hover {
width: 620px;
height: 400px;
background: transparent;
}
.border-fill:hover:after {
width: 620px;
height: 400px;
transition-delay: 400ms, 600ms;
}
.circle {
transition: width, height;
transition-duration: 200ms;
transition-timing-function: ease-out;
}
.circle:after {
content: "";
display: block;
position: absolute;
transition: width, height, right, left, opacity, transform;
transition-duration: 400ms;
transition-timing-function: ease-out, ease-out, linear, linear, linear, linear;
width: 200px;
height: 200px;
}
.circle.to-right:after {
left: 0;
}
.circle.to-right:hover:after {
left: 50%;
transform: translateX(-50%);
}
.circle.to-left:after {
right: 0;
}
.circle.to-left:hover:after {
right: 50%;
transform: translateX(50%);
}
.circle.block:after {
border-radius: 50%;
overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.circle:hover {
width: 620px;
height: 400px;
}
.circle:hover:after {
width: 400px;
height: 400px;
}
.zoom:hover {
animation: grow forwards;
animation-duration: 1s;
}
.bouncy {
transition: width, height, transform;
transition-duration: 400ms;
transition-timing-function: cubic-bezier(0.17, 0.67, 0.68, 2);
}
.bouncy:hover {
width: 620px;
height: 400px;
}
.shake {
transition: transform;
transition-duration: 200ms;
transition-timing-function: ease-out;
}
.shake:hover {
animation: shake 10, grow steps(10) forwards;
animation-duration: 0.1s, 1s;
}
.shake:hover.from-center {
animation: shake-from-center 10, grow steps(10) forwards;
animation-duration: 0.1s, 1s;
}
/* ------------------------ */
/* Animations */
/* ------------------------ */
@keyframes grow {
from {
width: 200px;
height: 200px;
}
to {
width: 620px;
height: 400px;
}
}
@keyframes shake {
0% {
transform: translateX(-5px) rotate(-5deg);
}
50% {
transform: translateX(5px) rotate(5deg);
}
100% {
transform: translateX(-5px) rotate(-5deg);
}
}
@keyframes shake-from-center {
0% {
transform: translateX(calc(-50% - 5px)) rotate(-5deg);
}
50% {
transform: translateX(calc(-50% + 5px)) rotate(5deg);
}
100% {
transform: translateX(calc(-50% - 5px)) rotate(-5deg);
}
}
/* ------------------------ */
/* General Styles */
/* ------------------------ */
body, h1, h3, h4 {
font-family: "Roboto", sans-serif;
font-weight: 100;
color: white;
}
a {
color: white;
}
.row {
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
background-size: cover;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQxYTZiNCIgc3RvcC1vcGFjaXR5PSIwLjkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5NWNmYjgiIHN0b3Atb3BhY2l0eT0iMC45Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -moz-linear-gradient(290deg, rgba(65, 166, 180, 0.9), rgba(149, 207, 184, 0.9));
background-image: -webkit-linear-gradient(290deg, rgba(65, 166, 180, 0.9), rgba(149, 207, 184, 0.9));
background-image: linear-gradient(160deg, rgba(65, 166, 180, 0.9), rgba(149, 207, 184, 0.9));
}
.row:first-child, .row:last-child {
background: #41a6b4;
}
.row.header .row__inner, .row.footer .row__inner {
text-align: center;
line-height: 0.75em;
padding: 50px 0;
}
.row:not(.header):not(.footer) .row__inner {
height: 500px;
}
.row__inner {
margin: 0 auto;
padding: 10px 0 30px 0;
width: 620px;
position: relative;
}
.block {
width: 200px;
height: 200px;
position: absolute;
border-radius: 5px;
box-sizing: border-box;
}
.block:before, .block:after {
border-radius: 5px;
overflow: hidden;
box-sizing: border-box;
}
.block:hover {
z-index: 100;
}
.to-left,
.to-left:before,
.to-left:after {
right: 0;
}
.to-right,
.to-right:before,
.to-right:after {
left: 0;
}
.from-center,
.from-center:before,
.from-center:after {
left: 50%;
transform: translateX(-50%);
}
nav {
font-size: 14px;
}
nav ul {
margin: 0;
padding: 20px 0 0 0;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin: 0 5px;
}
nav a {
text-decoration: none;
padding: 5px;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.5);
}
nav a:hover {
background: white;
color: #df7c72;
}
/* ------------------------ */
/* Lorem Pixels */
/* ------------------------ */
.slide-down:nth-child(2) {
background: url(http://lorempixel.com/200/200/people/1/);
background-size: cover;
background-position: center center;
}
.slide-down:nth-child(2):after {
background: url(http://lorempixel.com/620/400/people/1/);
background-size: cover;
background-position: center center;
}
.slide-down:nth-child(3) {
background: url(http://lorempixel.com/200/200/people/2/);
background-size: cover;
background-position: center center;
}
.slide-down:nth-child(3):after {
background: url(http://lorempixel.com/620/400/people/2/);
background-size: cover;
background-position: center center;
}
.slide-down:nth-child(4) {
background: url(http://lorempixel.com/200/200/people/3/);
background-size: cover;
background-position: center center;
}
.slide-down:nth-child(4):after {
background: url(http://lorempixel.com/620/400/people/3/);
background-size: cover;
background-position: center center;
}
.jump-up:nth-child(2) {
background: url(http://lorempixel.com/200/200/nature/1/);
background-size: cover;
background-position: center center;
}
.jump-up:nth-child(2):before {
background: url(http://lorempixel.com/620/400/nature/1/);
background-size: cover;
background-position: center center;
}
.jump-up:nth-child(3) {
background: url(http://lorempixel.com/200/200/nature/2/);
background-size: cover;
background-position: center center;
}
.jump-up:nth-child(3):before {
background: url(http://lorempixel.com/620/400/nature/2/);
background-size: cover;
background-position: center center;
}
.jump-up:nth-child(4) {
background: url(http://lorempixel.com/200/200/nature/3/);
background-size: cover;
background-position: center center;
}
.jump-up:nth-child(4):before {
background: url(http://lorempixel.com/620/400/nature/3/);
background-size: cover;
background-position: center center;
}
.unfold:nth-child(2) {
background: url(http://lorempixel.com/620/400/cats/1/);
background-size: cover;
background-position: center center;
}
.unfold:nth-child(2):before {
background: url(http://lorempixel.com/620/400/cats/1/);
background-size: cover;
background-position: center center;
}
.unfold:nth-child(2):after {
background: url(http://lorempixel.com/620/400/cats/1/);
background-size: cover;
background-position: center center;
}
.unfold:nth-child(3) {
background: url(http://lorempixel.com/620/400/cats/5/);
background-size: cover;
background-position: center center;
}
.unfold:nth-child(3):before {
background: url(http://lorempixel.com/620/400/cats/5/);
background-size: cover;
background-position: center center;
}
.unfold:nth-child(3):after {
background: url(http://lorempixel.com/620/400/cats/5/);
background-size: cover;
background-position: center center;
}
.unfold:nth-child(4) {
background: url(http://lorempixel.com/620/400/cats/3/);
background-size: cover;
background-position: center center;
}
.unfold:nth-child(4):before {
background: url(http://lorempixel.com/620/400/cats/3/);
background-size: cover;
background-position: center center;
}
.unfold:nth-child(4):after {
background: url(http://lorempixel.com/620/400/cats/3/);
background-size: cover;
background-position: center center;
}
.step-by-step:nth-child(2) {
background: url(http://lorempixel.com/620/400/fashion/1/);
background-size: cover;
background-position: center center;
}
.step-by-step:nth-child(3) {
background: url(http://lorempixel.com/620/400/fashion/2/);
background-size: cover;
background-position: center center;
}
.step-by-step:nth-child(4) {
background: url(http://lorempixel.com/620/400/fashion/3/);
background-size: cover;
background-position: center center;
}
.border-fill:nth-child(2):after {
background: url(http://lorempixel.com/620/400/sports/1/);
background-size: cover;
background-position: center center;
}
.border-fill:nth-child(3):after {
background: url(http://lorempixel.com/620/400/sports/2/);
background-size: cover;
background-position: center center;
}
.border-fill:nth-child(4):after {
background: url(http://lorempixel.com/620/400/sports/3/);
background-size: cover;
background-position: center center;
}
.circle:nth-child(2):after {
background: url(http://lorempixel.com/620/400/transport/1/);
background-size: cover;
background-position: center center;
}
.circle:nth-child(3):after {
background: url(http://lorempixel.com/620/400/transport/2/);
background-size: cover;
background-position: center center;
}
.circle:nth-child(4):after {
background: url(http://lorempixel.com/620/400/transport/3/);
background-size: cover;
background-position: center center;
}
.zoom:nth-child(2) {
background: url(http://lorempixel.com/620/400/food/1/);
background-size: cover;
background-position: center center;
}
.zoom:nth-child(3) {
background: url(http://lorempixel.com/620/400/food/2/);
background-size: cover;
background-position: center center;
}
.zoom:nth-child(4) {
background: url(http://lorempixel.com/620/400/food/3/);
background-size: cover;
background-position: center center;
}
.bouncy:nth-child(2) {
background: url(http://lorempixel.com/620/400/nightlife/1/);
background-size: cover;
background-position: center center;
}
.bouncy:nth-child(3) {
background: url(http://lorempixel.com/620/400/nightlife/2/);
background-size: cover;
background-position: center center;
}
.bouncy:nth-child(4) {
background: url(http://lorempixel.com/620/400/nightlife/3/);
background-size: cover;
background-position: center center;
}
.shake:nth-child(2) {
background: url(http://lorempixel.com/620/400/sports/4/);
background-size: cover;
background-position: center center;
}
.shake:nth-child(3) {
background: url(http://lorempixel.com/620/400/sports/5/);
background-size: cover;
background-position: center center;
}
.shake:nth-child(4) {
background: url(http://lorempixel.com/620/400/sports/6/);
background-size: cover;
background-position: center center;
}
$(".block").hover(function() {
$(this).siblings(".block").fadeOut("fast");
}, function() {
setTimeout(function() {
$(this).siblings(".block").fadeIn("fast");
}.bind(this), 300);
});
$("nav a").on("click", function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr("href")).offset().top
}, 500);
});
