<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="slider">
<div class="slider--el slider--el-1 anim-4parts active">
<div class="slider--el-bg">
<div class="part top left"></div>
<div class="part top right"></div>
<div class="part bot left"></div>
<div class="part bot right"></div>
</div>
<div class="slider--el-content">
<h2 class="slider--el-heading">First slide</h2>
</div>
</div>
<div class="slider--el slider--el-2 anim-9parts">
<div class="slider--el-bg">
<div class="part left-top"></div>
<div class="part mid-top"></div>
<div class="part right-top"></div>
<div class="part left-mid"></div>
<div class="part mid-mid"></div>
<div class="part right-mid"></div>
<div class="part left-bot"></div>
<div class="part mid-bot"></div>
<div class="part right-bot"></div>
</div>
<div class="slider--el-content">
<h2 class="slider--el-heading">Second slide</h2>
</div>
</div>
<div class="slider--el slider--el-3 anim-5parts">
<div class="slider--el-bg">
<div class="part part-1"></div>
<div class="part part-2"></div>
<div class="part part-3"></div>
<div class="part part-4"></div>
<div class="part part-5"></div>
</div>
<div class="slider--el-content">
<h2 class="slider--el-heading">Third slide</h2>
</div>
</div>
<div class="slider--el slider--el-4 anim-3parts">
<div class="slider--el-bg">
<div class="part left"></div>
<div class="part mid"></div>
<div class="part right"></div>
</div>
<div class="slider--el-content">
<h2 class="slider--el-heading">Fourth slide</h2>
</div>
</div>
<span class="slider--control left"></span>
<span class="slider--control right"></span>
</div>
@font-face {
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/TESLA.ttf");
font-family: Tesla;
}
@font-face {
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFDinTextCompPro-Medium.ttf");
font-family: pfd-medium;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
font-size: 62.5%;
height: 100%;
overflow: hidden;
}
button,
input {
outline: none;
border: none;
}
.slider {
position: relative;
height: 100%;
}
.slider--control {
z-index: 50;
position: absolute;
top: calc(50% - 1.4rem);
width: 1.7rem;
height: 2.8rem;
cursor: pointer;
}
.slider--control.left {
left: 3rem;
}
.slider--control.right {
right: 3rem;
}
.slider--control:after {
content: "";
position: absolute;
display: block;
top: -0.6rem;
left: -1.15rem;
width: 4rem;
height: 4rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
.slider--el {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: z-index 0.1s, -webkit-transform 2.8s;
transition: z-index 0.1s, -webkit-transform 2.8s;
transition: transform 2.8s, z-index 0.1s;
transition: transform 2.8s, z-index 0.1s, -webkit-transform 2.8s;
overflow: hidden;
}
.slider--el.active {
z-index: 10;
}
.slider--el.active .slider--el-bg {
-webkit-transform: scale(0.834);
transform: scale(0.834);
}
.slider--el.active .slider--el-content {
opacity: 1;
}
.slider--el.next {
z-index: 5;
}
.slider--el.next .slider--el-bg {
-webkit-transform: scale(0.834);
transform: scale(0.834);
}
.slider--el.anim-5parts .part {
position: absolute;
top: 0;
width: 20.1%;
height: 100%;
overflow: hidden;
will-change: transform;
}
.slider--el.anim-5parts .part:before {
content: "";
display: block;
position: absolute;
background-size: cover;
top: 0;
width: 500%;
height: 100%;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-1.jpg");
}
.slider--el.anim-5parts .part.part-1 {
-webkit-transition: -webkit-transform 1.1s 0.3s;
transition: -webkit-transform 1.1s 0.3s;
transition: transform 1.1s 0.3s;
transition: transform 1.1s 0.3s, -webkit-transform 1.1s 0.3s;
left: 0%;
}
.slider--el.anim-5parts .part.part-1:before {
left: 0%;
}
.slider--el.anim-5parts .part.part-2 {
-webkit-transition: -webkit-transform 1.1s 0.5s;
transition: -webkit-transform 1.1s 0.5s;
transition: transform 1.1s 0.5s;
transition: transform 1.1s 0.5s, -webkit-transform 1.1s 0.5s;
left: 20%;
}
.slider--el.anim-5parts .part.part-2:before {
left: -100%;
}
.slider--el.anim-5parts .part.part-3 {
-webkit-transition: -webkit-transform 1.1s 0.7s;
transition: -webkit-transform 1.1s 0.7s;
transition: transform 1.1s 0.7s;
transition: transform 1.1s 0.7s, -webkit-transform 1.1s 0.7s;
left: 40%;
}
.slider--el.anim-5parts .part.part-3:before {
left: -200%;
}
.slider--el.anim-5parts .part.part-4 {
-webkit-transition: -webkit-transform 1.1s 0.5s;
transition: -webkit-transform 1.1s 0.5s;
transition: transform 1.1s 0.5s;
transition: transform 1.1s 0.5s, -webkit-transform 1.1s 0.5s;
left: 60%;
}
.slider--el.anim-5parts .part.part-4:before {
left: -300%;
}
.slider--el.anim-5parts .part.part-5 {
-webkit-transition: -webkit-transform 1.1s 0.3s;
transition: -webkit-transform 1.1s 0.3s;
transition: transform 1.1s 0.3s;
transition: transform 1.1s 0.3s, -webkit-transform 1.1s 0.3s;
left: 80%;
}
.slider--el.anim-5parts .part.part-5:before {
left: -400%;
}
.slider--el.anim-5parts.removed .part {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.slider--el.anim-9parts .slider--el-bg {
-webkit-perspective: 2000;
perspective: 2000;
}
.slider--el.anim-9parts .part {
position: absolute;
width: 33.5%;
height: 33.5%;
overflow: hidden;
will-change: transform;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.slider--el.anim-9parts .part:before {
content: "";
display: block;
position: absolute;
background-size: cover;
width: 300%;
height: 300%;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-2.jpg");
}
.slider--el.anim-9parts .part.left-top {
top: 0%;
left: 0%;
-webkit-transition: opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s;
transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.left-top:before {
top: 0%;
left: 0%;
}
.slider--el.anim-9parts .part.mid-top {
top: 0%;
left: 33.33333%;
-webkit-transition: opacity 0.6s 0.8s, -webkit-transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: opacity 0.6s 0.8s, -webkit-transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.8s;
transition: transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.8s, -webkit-transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.mid-top:before {
top: 0%;
left: -100%;
}
.slider--el.anim-9parts .part.right-top {
top: 0%;
left: 66.66667%;
-webkit-transition: opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s;
transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.right-top:before {
top: 0%;
left: -200%;
}
.slider--el.anim-9parts .part.left-mid {
top: 33.33333%;
left: 0%;
-webkit-transition: opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s;
transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.left-mid:before {
top: -100%;
left: 0%;
}
.slider--el.anim-9parts .part.mid-mid {
top: 33.33333%;
left: 33.33333%;
-webkit-transition: opacity 0.6s 0.7s, -webkit-transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: opacity 0.6s 0.7s, -webkit-transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.7s;
transition: transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.7s, -webkit-transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.mid-mid:before {
top: -100%;
left: -100%;
}
.slider--el.anim-9parts .part.right-mid {
top: 33.33333%;
left: 66.66667%;
-webkit-transition: opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s;
transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.right-mid:before {
top: -100%;
left: -200%;
}
.slider--el.anim-9parts .part.left-bot {
top: 66.66667%;
left: 0%;
-webkit-transition: opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s;
transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.left-bot:before {
top: -200%;
left: 0%;
}
.slider--el.anim-9parts .part.mid-bot {
top: 66.66667%;
left: 33.33333%;
-webkit-transition: opacity 0.6s 1.2s, -webkit-transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: opacity 0.6s 1.2s, -webkit-transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.2s;
transition: transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.2s, -webkit-transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.mid-bot:before {
top: -200%;
left: -100%;
}
.slider--el.anim-9parts .part.right-bot {
top: 66.66667%;
left: 66.66667%;
-webkit-transition: opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95);
transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s;
transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.right-bot:before {
top: -200%;
left: -200%;
}
.slider--el.anim-9parts.removed .part {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
opacity: 0;
}
.slider--el.anim-3parts .part {
position: absolute;
top: 0;
width: 33.5%;
height: 100%;
overflow: hidden;
-webkit-transition: -webkit-transform 1.5s 0.3s;
transition: -webkit-transform 1.5s 0.3s;
transition: transform 1.5s 0.3s;
transition: transform 1.5s 0.3s, -webkit-transform 1.5s 0.3s;
will-change: transform;
}
.slider--el.anim-3parts .part:before {
content: "";
display: block;
position: absolute;
background-size: cover;
width: 300%;
height: 100%;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-3.jpg");
}
.slider--el.anim-3parts .part.left {
left: 0;
}
.slider--el.anim-3parts .part.left:before {
left: 0;
}
.slider--el.anim-3parts .part.mid {
left: 33.33333%;
}
.slider--el.anim-3parts .part.mid:before {
left: -100%;
}
.slider--el.anim-3parts .part.right {
left: 66.66667%;
}
.slider--el.anim-3parts .part.right:before {
left: -200%;
}
.slider--el.anim-3parts.removed .left {
-webkit-transform: translate3D(-100%, -33.333%, 0);
transform: translate3D(-100%, -33.333%, 0);
}
.slider--el.anim-3parts.removed .mid {
-webkit-transform: translate3D(0, 100%, 0);
transform: translate3D(0, 100%, 0);
}
.slider--el.anim-3parts.removed .right {
-webkit-transform: translate3D(100%, -33.333%, 0);
transform: translate3D(100%, -33.333%, 0);
}
.slider--el.anim-4parts .part {
position: absolute;
width: 50.2%;
height: 50.2%;
overflow: hidden;
will-change: transform;
}
.slider--el.anim-4parts .part:before {
content: "";
display: block;
position: absolute;
background-size: cover;
width: 200%;
height: 200%;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-4.jpg");
}
.slider--el.anim-4parts .part.top {
top: 0;
-webkit-transition: -webkit-transform 1.3s 0.3s;
transition: -webkit-transform 1.3s 0.3s;
transition: transform 1.3s 0.3s;
transition: transform 1.3s 0.3s, -webkit-transform 1.3s 0.3s;
}
.slider--el.anim-4parts .part.top:before {
top: 0;
}
.slider--el.anim-4parts .part.bot {
top: 50%;
-webkit-transition: -webkit-transform 1.3s 0.5s;
transition: -webkit-transform 1.3s 0.5s;
transition: transform 1.3s 0.5s;
transition: transform 1.3s 0.5s, -webkit-transform 1.3s 0.5s;
}
.slider--el.anim-4parts .part.bot:before {
top: -100%;
}
.slider--el.anim-4parts .part.left {
left: 0;
}
.slider--el.anim-4parts .part.left:before {
left: 0;
}
.slider--el.anim-4parts .part.right {
left: 50%;
}
.slider--el.anim-4parts .part.right:before {
left: -100%;
}
.slider--el.anim-4parts.removed .left {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slider--el.anim-4parts.removed .right {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.slider--el-bg {
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
background-size: cover;
-webkit-transition: -webkit-transform 1s 1s;
transition: -webkit-transform 1s 1s;
transition: transform 1s 1s;
transition: transform 1s 1s, -webkit-transform 1s 1s;
will-change: transform;
}
.slider--el-bg .part:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.15);
}
.slider--el-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20rem;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
opacity: 0;
}
.slider--el-heading {
font-size: 9rem;
font-family: Tesla;
text-transform: uppercase;
color: #fff;
}
.slider--el.removed .slider--el-content {
opacity: 0;
}
$(document).ready(function() {
var sliding = false,
curSlide = 1,
numOfSlides = $(".slider--el").length;
$(document).on("click", ".slider--control", function() {
if (sliding) return;
sliding = true;
$(".slider--el").show();
$(".slider--el").css("top");
$(".slider--el.active").addClass("removed");
($(this).hasClass("right")) ? curSlide++ : curSlide--;
if (curSlide < 1) curSlide = numOfSlides;
if (curSlide > numOfSlides) curSlide = 1;
$(".slider--el-" + curSlide).addClass("next");
setTimeout(function() {
$(".slider--el.removed").hide();
$(".slider--el").removeClass("active next removed");
$(".slider--el-" + curSlide).addClass("active");
sliding = false;
}, 1800);
});
});
