Source of inspiration - http://www.dehaus.be/
Pure css version - http://codepen.io/suez/pen/vEZMoa
A Pen by Nikolay Talanov on CodePen.
Source of inspiration - http://www.dehaus.be/
Pure css version - http://codepen.io/suez/pen/vEZMoa
A Pen by Nikolay Talanov on CodePen.
<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> | |
$(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); | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import "compass/css3"; | |
@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; | |
} | |
$RT: 1.5s; // .REMOVING TRANSITION TIME | |
$RTDELAY: 0.3s; // .REMOVING TRANSITION DELAY (text hiding) | |
$BG-T: 1s; // .ACTIVE BACKGROUND ZOOM TRANSITION | |
$TOTAL-T: $RT + $RTDELAY + $BG-T; // total effects transition before you can show text again | |
@mixin bgPart() { | |
content: ""; | |
display: block; | |
position: absolute; | |
background-size: cover; | |
} | |
@mixin bg1Part($l) { | |
left: 20% * ($l - 1); | |
&:before { | |
left: -100% * ($l - 1); | |
} | |
} | |
@mixin bg2Part($l,$t) { | |
top: 0 + (100% / 3) * ($t - 1); | |
left: 0 + (100% / 3) * ($l - 1); | |
&:before { | |
top: -100% * ($t - 1); | |
left: -100% * ($l - 1); | |
} | |
} | |
@mixin bg2PartTransition($dur, $del) { | |
transition: transform $dur ($del + $RTDELAY) cubic-bezier(.58,-0.7,.59,.95), opacity ($dur - $dur / 3) ($del + $dur/3 + 0.1s + $RTDELAY); | |
} | |
*, *: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%; | |
&--control { | |
z-index: 50; | |
position: absolute; | |
top: calc(50% - 1.4rem); | |
width: 1.7rem; | |
height: 2.8rem; | |
cursor: pointer; | |
&.left { | |
left: 3rem; | |
} | |
&.right { | |
right: 3rem; | |
} | |
&: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%; | |
} | |
} | |
&--el { | |
z-index: 1; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
transition: transform $TOTAL-T, z-index 0.1s; | |
overflow: hidden; | |
&.active { | |
z-index: 10; | |
.slider--el-bg { | |
transform: scale(0.834); | |
} | |
.slider--el-content { | |
opacity: 1; | |
} | |
} | |
&.next { | |
z-index: 5; | |
.slider--el-bg { | |
transform: scale(0.834); | |
} | |
} | |
&.anim-5parts { | |
.part { | |
position: absolute; | |
top: 0; | |
width: 20.1%; | |
height: 100%; | |
overflow: hidden; | |
will-change: transform; | |
&:before { | |
@include bgPart; | |
top: 0; | |
width: 500%; | |
height: 100%; | |
background-image: url('http://i.imgur.com/YhPMwpd.jpg'); | |
} | |
&.part-1 { | |
transition: transform ($RT - 0.4s) $RTDELAY; | |
@include bg1Part(1); | |
} | |
&.part-2 { | |
transition: transform ($RT - 0.4s) ($RTDELAY + 0.2s); | |
@include bg1Part(2); | |
} | |
&.part-3 { | |
transition: transform ($RT - 0.4s) ($RTDELAY + 0.4s); | |
@include bg1Part(3); | |
} | |
&.part-4 { | |
transition: transform ($RT - 0.4s) ($RTDELAY + 0.2s); | |
@include bg1Part(4); | |
} | |
&.part-5 { | |
transition: transform ($RT - 0.4s) $RTDELAY; | |
@include bg1Part(5); | |
} | |
} | |
&.removed { | |
.part { | |
transform: translateY(100%); | |
} | |
} | |
} | |
&.anim-9parts { | |
.slider--el-bg { | |
perspective: 2000; | |
} | |
.part { | |
position: absolute; | |
width: 33.5%; | |
height: 33.5%; | |
overflow: hidden; | |
will-change: transform; | |
transform-origin: 0% 100%; | |
&:before { | |
@include bgPart; | |
width: 300%; | |
height: 300%; | |
background-image: url('http://i.imgur.com/dMZFVq9.jpg'); | |
} | |
&.left-top { | |
@include bg2Part(1,1); | |
@include bg2PartTransition(0.9s, 0.2s); | |
} | |
&.mid-top { | |
@include bg2Part(2,1); | |
@include bg2PartTransition(0.9s, 0.1s); | |
} | |
&.right-top { | |
@include bg2Part(3,1); | |
@include bg2PartTransition(0.9s, 0.2s); | |
} | |
&.left-mid { | |
@include bg2Part(1,2); | |
@include bg2PartTransition(0.9s, 0.3s); | |
} | |
&.mid-mid { | |
@include bg2Part(2,2); | |
@include bg2PartTransition(0.9s, 0s); | |
} | |
&.right-mid { | |
@include bg2Part(3,2); | |
@include bg2PartTransition(0.9s, 0.3s); | |
} | |
&.left-bot { | |
@include bg2Part(1,3); | |
@include bg2PartTransition(0.9s, 0.4s); | |
} | |
&.mid-bot { | |
@include bg2Part(2,3); | |
@include bg2PartTransition(0.9s, 0.5s); | |
} | |
&.right-bot { | |
@include bg2Part(3,3); | |
@include bg2PartTransition(0.9s, 0.4s); | |
} | |
} | |
&.removed { | |
.part { | |
transform: rotateX(90deg); | |
opacity: 0; | |
} | |
} | |
} | |
&.anim-3parts { | |
.part { | |
position: absolute; | |
top: 0; | |
width: 33.5%; | |
height: 100%; | |
overflow: hidden; | |
transition: transform $RT $RTDELAY; | |
will-change: transform; | |
&:before { | |
@include bgPart; | |
width: 300%; | |
height: 100%; | |
background-image: url('http://i.imgur.com/hseia1b.jpg'); | |
} | |
&.left { | |
left: 0; | |
&:before { | |
left: 0; | |
} | |
} | |
&.mid { | |
left: (100% / 3); | |
&:before { | |
left: -100%; | |
} | |
} | |
&.right { | |
left: (100% / 3) * 2; | |
&:before { | |
left: -200%; | |
} | |
} | |
} | |
&.removed { | |
.left { | |
transform: translate3D(-100%, -33.333%, 0); | |
} | |
.mid { | |
transform: translate3D(0, 100%, 0); | |
} | |
.right { | |
transform: translate3D(100%, -33.333%, 0); | |
} | |
} | |
} | |
&.anim-4parts { | |
.part { | |
position: absolute; | |
width: 50.2%; | |
height: 50.2%; | |
overflow: hidden; | |
will-change: transform; | |
&:before { | |
@include bgPart; | |
width: 200%; | |
height: 200%; | |
background-image: url('http://i.imgur.com/kxhrMfQ.jpg'); | |
} | |
&.top { | |
top: 0; | |
transition: transform ($RT - 0.2s) $RTDELAY; | |
&:before { | |
top: 0; | |
} | |
} | |
&.bot { | |
top: 50%; | |
transition: transform ($RT - 0.2s) ($RTDELAY + 0.2s); | |
&:before { | |
top: -100%; | |
} | |
} | |
&.left { | |
left: 0; | |
&:before { | |
left: 0; | |
} | |
} | |
&.right { | |
left: 50%; | |
&:before { | |
left: -100%; | |
} | |
} | |
} | |
&.removed { | |
.left { | |
transform: translateX(-100%); | |
} | |
.right { | |
transform: translateX(100%); | |
} | |
} | |
} | |
&-bg { | |
position: absolute; | |
top: -10%; | |
left: -10%; | |
width: 120%; | |
height: 120%; | |
background-size: cover; | |
transition: transform $BG-T 1s; | |
will-change: transform; | |
.part:after { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: rgba(0,0,0,0.15); | |
} | |
} | |
&-content { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
padding: 20rem; | |
transition: opacity $RTDELAY; | |
opacity: 0; | |
} | |
&-heading { | |
font-size: 9rem; | |
font-family: Tesla; | |
text-transform: uppercase; | |
color: #fff; | |
} | |
&.removed { | |
.slider--el-content { | |
opacity: 0; | |
} | |
} | |
} | |
} |