Skip to content

Instantly share code, notes, and snippets.

@She-Codes

She-Codes/Full-screen slider (JS) with custom effects.markdown

Created August 5, 2015 04:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save She-Codes/a7ba059c61731466a4e3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save She-Codes/a7ba059c61731466a4e3 to your computer and use it in GitHub Desktop.
Download ZIP
Full-screen slider (JS) with custom effects
Raw
Full-screen slider (JS) with custom effects.markdown
Raw
index.html
<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>
Raw
script.js
$(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);
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@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;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment