Skip to content

Instantly share code, notes, and snippets.

@mcanas

mcanas/index.html

Created December 27, 2014 16:19
Show Gist options
  • Save mcanas/d84f293d999b0fb1c7a1 to your computer and use it in GitHub Desktop.
Save mcanas/d84f293d999b0fb1c7a1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.fss__screen {
background: #eee;
overflow: hidden;
height: 300px;
padding: 20px;
bottom: 0;
left: 0;
position: absolute;
right: 0;
}
.fss__slides {
position: relative;
text-align: center;
-webkit-transform-style: preserve-3d;
}
.fss__slide {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
display: block;
position: absolute;
opacity: 0;
left: 50%;
margin-left: -300px;
z-index: 1;
-webkit-transform: translateX(0) translateY(0) translateZ(0);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.fss__slide.fss__slide--current {
opacity: 1;
z-index: 2;
-webkit-transform: translateX(0) translateY(0) translateZ(0);
}
.fss__slide.fss__slide--next,
.fss__slide.fss__slide--prev {
opacity: .5;
}
.fss__slide.fss__slide--next {
-webkit-transform: translateX(45px) translateY(35px) translateZ(-20px) rotateZ(5deg);
}
.fss__slide.fss__slide--prev {
-webkit-transform: translateX(-45px) translateY(35px) translateZ(-20px) rotateZ(-5deg);
}
</style>
</head>
<body>
<p>
<button class="fss__btn fss__btn--prev">Prev</button>
<button class="fss__btn fss__btn--next">Next</button>
</p>
<div class="fss__screen">
<div class="fss__slides">
<div class="fss__slide fss__slide--current"><img src="http://www.fillmurray.com/600/400" /></div>
<div class="fss__slide fss__slide--next"><img src="http://www.fillmurray.com/600/500" /></div>
<div class="fss__slide fss__slide--prev"><img src="http://www.fillmurray.com/600/600" /></div>
<div class="fss__slide"><img src="http://www.fillmurray.com/600/700" /></div>
</div>
</div>
<script id="jsbin-javascript">
$(function() {
var images = document.querySelectorAll('.fss__slide'), current = 0;
$('.fss__btn--next').on('click', function() {
current = go(images, current, 'next');
});
$('.fss__btn--prev').on('click', function() {
current = go(images, current, 'prev');
});
});
function go( images, current, direction ) {
var next, prev,
dir = {
'next': function() {
return (images[++current]) ? current : 0;
},
'prev': function() {
return (images[--current]) ? current : images.length - 1;
}
};
current = dir[direction]();
next = (!images[current + 1]) ? 0 : current + 1;
prev = (!images[current - 1]) ? images.length - 1 : current - 1;
$(images).removeClass('fss__slide--next fss__slide--current fss__slide--prev');
$(images[next]).addClass('fss__slide--next');
$(images[current]).addClass('fss__slide--current');
$(images[prev]).addClass('fss__slide--prev');
return current;
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>
<button class="fss__btn fss__btn--prev">Prev</button>
<button class="fss__btn fss__btn--next">Next</button>
</p>
<div class="fss__screen">
<div class="fss__slides">
<div class="fss__slide fss__slide--current"><img src="//www.fillmurray.com/600/400" /></div>
<div class="fss__slide fss__slide--next"><img src="//www.fillmurray.com/600/500" /></div>
<div class="fss__slide fss__slide--prev"><img src="//www.fillmurray.com/600/600" /></div>
<div class="fss__slide"><img src="//www.fillmurray.com/600/700" /></div>
</div>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.fss {
&__screen {
background: #eee;
overflow:hidden;
height: 300px;
padding: 20px;
bottom: 0;
left: 0;
position: absolute;
right: 0;
}
&__slides {
position: relative;
text-align: center;
-webkit-transform-style: preserve-3d;
}
&__slide {
box-shadow: 0 0 20px rgba(0,0,0,.75);
display: block;
position: absolute;
opacity: 0;
left: 50%;
margin-left: -300px;
z-index: 1;
-webkit-transform:
translateX(0)
translateY(0)
translateZ(0);
-webkit-transition:
-webkit-transform .5s cubic-bezier(.68,-.55,.265,1.55),
opacity .5s cubic-bezier(.68,-.55,.265,1.55);
&&--current {
opacity: 1;
z-index: 2;
-webkit-transform:
translateX(0)
translateY(0)
translateZ(0);
}
&&--next,
&&--prev {
opacity: .5;
}
&&--next {
-webkit-transform:
translateX(45px)
translateY(35px)
translateZ(-20px)
rotateZ(5deg);
}
&&--prev {
-webkit-transform:
translateX(-45px)
translateY(35px)
translateZ(-20px)
rotateZ(-5deg);
}
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(function() {
var images = document.querySelectorAll('.fss__slide'), current = 0;
$('.fss__btn--next').on('click', function() {
current = go(images, current, 'next');
});
$('.fss__btn--prev').on('click', function() {
current = go(images, current, 'prev');
});
});
function go( images, current, direction ) {
var next, prev,
dir = {
'next': function() {
return (images[++current]) ? current : 0;
},
'prev': function() {
return (images[--current]) ? current : images.length - 1;
}
};
current = dir[direction]();
next = (!images[current + 1]) ? 0 : current + 1;
prev = (!images[current - 1]) ? images.length - 1 : current - 1;
$(images).removeClass('fss__slide--next fss__slide--current fss__slide--prev');
$(images[next]).addClass('fss__slide--next');
$(images[current]).addClass('fss__slide--current');
$(images[prev]).addClass('fss__slide--prev');
return current;
}</script></body>
</html>
Raw
jsbin.higifi.css
.fss__screen {
background: #eee;
overflow: hidden;
height: 300px;
padding: 20px;
bottom: 0;
left: 0;
position: absolute;
right: 0;
}
.fss__slides {
position: relative;
text-align: center;
-webkit-transform-style: preserve-3d;
}
.fss__slide {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
display: block;
position: absolute;
opacity: 0;
left: 50%;
margin-left: -300px;
z-index: 1;
-webkit-transform: translateX(0) translateY(0) translateZ(0);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.fss__slide.fss__slide--current {
opacity: 1;
z-index: 2;
-webkit-transform: translateX(0) translateY(0) translateZ(0);
}
.fss__slide.fss__slide--next,
.fss__slide.fss__slide--prev {
opacity: .5;
}
.fss__slide.fss__slide--next {
-webkit-transform: translateX(45px) translateY(35px) translateZ(-20px) rotateZ(5deg);
}
.fss__slide.fss__slide--prev {
-webkit-transform: translateX(-45px) translateY(35px) translateZ(-20px) rotateZ(-5deg);
}
Raw
jsbin.higifi.js
$(function() {
var images = document.querySelectorAll('.fss__slide'), current = 0;
$('.fss__btn--next').on('click', function() {
current = go(images, current, 'next');
});
$('.fss__btn--prev').on('click', function() {
current = go(images, current, 'prev');
});
});
function go( images, current, direction ) {
var next, prev,
dir = {
'next': function() {
return (images[++current]) ? current : 0;
},
'prev': function() {
return (images[--current]) ? current : images.length - 1;
}
};
current = dir[direction]();
next = (!images[current + 1]) ? 0 : current + 1;
prev = (!images[current - 1]) ? images.length - 1 : current - 1;
$(images).removeClass('fss__slide--next fss__slide--current fss__slide--prev');
$(images[next]).addClass('fss__slide--next');
$(images[current]).addClass('fss__slide--current');
$(images[prev]).addClass('fss__slide--prev');
return current;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment