<!--svg -->
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="icon-ribbon" viewBox="0 0 24 24">
<title>ribbon</title>
<path d="M7 1h10q1.242 0 2.121 0.879t0.879 2.121v19l-8-6-8 6v-19q0-1.242 0.879-2.121t2.121-0.879zM17 3h-10q-0.414 0-0.707 0.293t-0.293 0.707v15l6-4.5 6 4.5v-15q0-0.414-0.293-0.707t-0.707-0.293z"></path>
</symbol>
<symbol id="icon-image" viewBox="0 0 24 24">
<title>image</title>
<path d="M4 1h16q1.242 0 2.121 0.879t0.879 2.121v16q0 1.242-0.879 2.121t-2.121 0.879h-16q-1.242 0-2.121-0.879t-0.879-2.121v-16q0-1.242 0.879-2.121t2.121-0.879zM21 17.414l-5-5-8.586 8.586h12.586q0.414 0 0.707-0.293t0.293-0.707v-2.586zM20 3h-16q-0.414 0-0.707 0.293t-0.293 0.707v16q0 0.414 0.293 0.707t0.707 0.293h0.586l11.414-11.414 5 5v-10.586q0-0.414-0.293-0.707t-0.707-0.293zM8 5q1.242 0 2.121 0.879t0.879 2.121-0.879 2.121-2.121 0.879-2.121-0.879-0.879-2.121 0.879-2.121 2.121-0.879zM8 7q-0.414 0-0.707 0.293t-0.293 0.707 0.293 0.707 0.707 0.293 0.707-0.293 0.293-0.707-0.293-0.707-0.707-0.293z"></path>
</symbol>
<symbol id="icon-search" viewBox="0 0 24 24">
<title>search</title>
<path d="M10 1q1.828 0 3.496 0.715t2.871 1.918 1.918 2.871 0.715 3.496q0 1.57-0.512 3.008t-1.457 2.609l5.68 5.672q0.289 0.289 0.289 0.711 0 0.43-0.285 0.715t-0.715 0.285q-0.422 0-0.711-0.289l-5.672-5.68q-1.172 0.945-2.609 1.457t-3.008 0.512q-1.828 0-3.496-0.715t-2.871-1.918-1.918-2.871-0.715-3.496 0.715-3.496 1.918-2.871 2.871-1.918 3.496-0.715zM10 3q-1.422 0-2.719 0.555t-2.234 1.492-1.492 2.234-0.555 2.719 0.555 2.719 1.492 2.234 2.234 1.492 2.719 0.555 2.719-0.555 2.234-1.492 1.492-2.234 0.555-2.719-0.555-2.719-1.492-2.234-2.234-1.492-2.719-0.555z"></path>
</symbol>
<symbol id="icon-rewind" viewBox="0 0 24 24">
<title>rewind</title>
<path d="M18 4q0.414 0 0.707 0.293t0.293 0.707-0.297 0.711l-6.289 6.289 6.289 6.289q0.297 0.297 0.297 0.711t-0.293 0.707-0.707 0.293q-0.422 0-0.711-0.289l-7-7q-0.289-0.289-0.289-0.711t0.289-0.711l7-7q0.289-0.289 0.711-0.289zM12 4q0.414 0 0.707 0.293t0.293 0.707-0.297 0.711l-6.289 6.289 6.289 6.289q0.297 0.297 0.297 0.711t-0.293 0.707-0.707 0.293q-0.422 0-0.711-0.289l-7-7q-0.289-0.289-0.289-0.711t0.289-0.711l7-7q0.289-0.289 0.711-0.289z"></path>
</symbol>
<symbol id="icon-fast-forward" viewBox="0 0 24 24">
<title>fast-forward</title>
<path d="M11 4q0.414 0 0.703 0.289l7 7q0.297 0.297 0.297 0.711t-0.297 0.711l-7 7q-0.289 0.289-0.703 0.289t-0.707-0.293-0.293-0.707q0-0.422 0.289-0.711l6.289-6.289-6.289-6.289q-0.289-0.289-0.289-0.711 0-0.43 0.285-0.715t0.715-0.285zM5 4q0.414 0 0.703 0.289l7 7q0.297 0.297 0.297 0.711t-0.297 0.711l-7 7q-0.289 0.289-0.703 0.289t-0.707-0.293-0.293-0.707q0-0.422 0.289-0.711l6.289-6.289-6.289-6.289q-0.289-0.289-0.289-0.711 0-0.43 0.285-0.715t0.715-0.285z"></path>
</symbol>
<symbol id="icon-speech-bubble" viewBox="0 0 24 24">
<title>speech-bubble</title>
<path d="M4 1h16q1.242 0 2.121 0.879t0.879 2.121v11q0 1.242-0.879 2.121t-2.121 0.879h-8l-7 5v-5h-1q-1.242 0-2.121-0.879t-0.879-2.121v-11q0-1.242 0.879-2.121t2.121-0.879zM20 3h-16q-0.414 0-0.707 0.293t-0.293 0.707v11q0 0.414 0.293 0.707t0.707 0.293h3v3.117l4.359-3.117h8.641q0.414 0 0.707-0.293t0.293-0.707v-11q0-0.414-0.293-0.707t-0.707-0.293z"></path>
</symbol>
<symbol id="icon-pie-graph" viewBox="0 0 24 24">
<title>pie-graph</title>
<path d="M12 1q2.242 0 4.277 0.871t3.508 2.344 2.344 3.508 0.871 4.277-0.871 4.277-2.344 3.508-3.508 2.344-4.277 0.871-4.277-0.871-3.508-2.344-2.344-3.508-0.871-4.277 0.871-4.277 2.344-3.508 3.508-2.344 4.277-0.871zM11 13v-9.945q-1.664 0.188-3.145 0.965t-2.547 1.957-1.688 2.75-0.621 3.273q0 1.828 0.715 3.496t1.918 2.871 2.871 1.918 3.496 0.715q1.703 0 3.273-0.621t2.75-1.688 1.957-2.547 0.965-3.145h-9.945zM13 3.055v7.945h7.945q-0.172-1.547-0.852-2.934t-1.727-2.434-2.434-1.727-2.934-0.852z"></path>
</symbol>
<symbol id="icon-star" viewBox="0 0 24 24">
<title>star</title>
<path d="M9.297 9l2.703-8.32 2.703 8.32h8.75l-7.078 4.914 2.703 8.172-7.078-5.18-7.078 5.141 2.703-8.133-7.078-4.914h8.75zM13.25 11l-1.25-3.977-1.25 3.977h-3.883l3.125 2.070-1.227 3.695 3.242-2.344 3.227 2.367-1.227-3.695 3.117-2.094h-3.875z"></path>
</symbol>
</defs>
</svg>
<!--svg end-->
<div class="nav">
<div class="container">
<div class="nav-list">
<div class="avatar">
<img src="http://img1.vued.vanthink.cn/vuedf926d9e80d3eb33c504228105f872e3c.png" />
</div>
<div class="quote">
Jack Pu's Blog (蒲小花的博客－ポーのブログ)
</div>
<a href="http://www.jackpu.com/">Home</a>
<a href="https://www.behance.net/codeui">Design</a>
<a href="http://www.jackpu.com/tag/web/">Web</a>
<a href="http://me.jackpu.com/">About Me</a>
</div>
<a href="javascript:;" class="menu-icon open">
<svg width="100%" height="100%" viewBox="0 0 60 60" preserveAspectRatio="none">
<g id="icon-grid">
<rect x="32.5" y="5.5" width="22" height="22"></rect>
<rect x="4.5" y="5.5" width="22" height="22"></rect>
<rect x="32.5" y="33.5" width="22" height="22"></rect>
<rect x="4.5" y="33.5" width="22" height="22"></rect>
</g>
<g id="icon-cross">
<line x1="4.5" y1="55.5" x2="54.953" y2="5.046"></line>
<line x1="54.953" y1="55.5" x2="4.5" y2="5.047"></line>
</g>
</svg>
</a>
</div>
</div>
<!--slide -->
<div id="slideshow" class="slideshow">
<div class="slide" >
<div class="bg-overlay" style="background-image:url(https://mir-s3-cdn-cf.behance.net/project_modules/max_3840/39e3c351859477.58fcba5606b10.png)"></div>
<blockquote>
<p>Rockets in the dark</p>
<a class="view-details noSwipe" href="https://www.behance.net/gallery/51859477/Rocket-in-the-dark">
阅读详情
</a>
</blockquote>
</div>
<div class="slide query" >
<div class="bg-overlay" style="background-image:url(https://mir-s3-cdn-cf.behance.net/project_modules/fs/3dab6652243157.5909f21fe8d4c.png)"></div>
<blockquote>
<p>Green City</p>
<a class="view-details noSwipe" href="https://www.behance.net/gallery/52243157/Green-City">
阅读详情 <svg style="margin-top:2px;" class="icon icon-fast-forward"><use xlink:href="#icon-fast-forward"></use></svg>
</a>
</blockquote>
</div>
<div class="slide query" >
<div class="bg-overlay" style="background-image:url(https://mir-s3-cdn-cf.behance.net/project_modules/fs/a378b146861521.58674867490db.png)"></div>
<blockquote>
<p>New Year</p>
<a class="view-details noSwipe" href="https://www.behance.net/gallery/46861521/2017-HAPPY-NEW-YEAR">
阅读详情 <svg style="margin-top:2px;" class="icon icon-fast-forward"><use xlink:href="#icon-fast-forward"></use></svg>
</a>
</blockquote>
</div>
<div class="slide query" >
<div class="bg-overlay" style="background-image:url(https://mir-s3-cdn-cf.behance.net/project_modules/fs/0519f944697923.581b08ed777ab.png)"></div>
<blockquote>
<p>Aurora and Firefly从</p>
<a class="view-details noSwipe" href="https://www.behance.net/gallery/44697923/Aurora-and-Firefly">
阅读详情
</a>
</blockquote>
</div>
</div>*{
margin: 0;
padding: 0;
}
html {
height: 100%;
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0,0,0,0)
}
body {
height: 100%;
background-color: #fff;
font-family: 'Helvetica Neue','\5FAE\8F6F\96C5\9ED1','\9ED1\4F53',sans-serif;
letter-spacing: 0.01rem;
font-size: 15px;
line-height: 1.75em;
color: #3A4145;
-webkit-font-feature-settings: 'kern' 1;
-moz-font-feature-settings: 'kern' 1;
-o-font-feature-settings: 'kern' 1;
text-rendering: geometricPrecision
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
vertical-align: middle
}
.nav {
overflow: hidden;
z-index: 1000;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 7rem;
margin-bottom: 0;
text-align: center;
font-size: 1.5rem;
opacity: 1;
transition: height .6s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1)
}
.nav .container {
position: relative;
width: 1170px;
height: 100%;
line-height: 7rem;
margin: 0 auto
}
.open .nav {
height: 100%;
background-color: #fff
}
.open .nav .nav-list {
opacity: 1;
transform: translateY(0)
}
.nav-list {
opacity: 0;
padding-top: 5rem;
margin: 0 4rem;
text-align: center;
font-size: 2rem;
line-height: 4rem;
transition: all .65s;
transform: translateY(-520px);
transition-timing-function: cubic-bezier(0.7,0,0.3,1)
}
.nav-list .avatar {
display: inline-block;
width: 12rem;
height: 12rem;
border-radius: 6rem;
border: 0.3rem solid #111;
text-align: center;
overflow: hidden
}
.nav-list .avatar img {
width: 100%;
height: 100%
}
.nav-list .quote {
font-size: 1.8rem;
color: #777
}
.nav-list a {
overflow: hidden;
display: block;
width: 20rem;
height: 4rem;
margin: 0 auto;
border-radius: 2rem;
white-space: nowrap;
text-overflow: ellipsis;
transition: all .25s ease;
text-decoration: underline;
color: #333;
transition: all .2s ease
}
.nav-list a:active {
background: linear-gradient(to left,#ee8326,#ef1d27);
color: #fff;
text-decoration: none
}
.nav-list a:hover {
color: #000
}
.menu-icon {
position: absolute;
right: 0;
bottom: 0;
width: 2.4rem
}
.menu-icon #icon-grid,.menu-icon #icon-cross {
opacity: 0;
stroke: #f1f1f1;
stroke-width: 2px;
fill: none;
transition: all 0.3s ease-in
}
.menu-icon #icon-cross {
opacity: 1
}
.menu-icon.open #icon-cross {
opacity: 0
}
.menu-icon.open #icon-grid {
opacity: 1
}
.open .nav .menu-icon #icon-cross {
stroke: #333
}
.slideshow,.slide,.slide::after {
width: 100%;
height: 100%
}
.slideshow {
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
transition: margin .6s;
-webkit-transition: margin .6s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
background-color: #2c3e50
}
.slideshow .ctrl {
z-index: 101;
position: absolute;
bottom: 6rem;
right: 3rem
}
.slideshow .ctrl a {
color: rgba(255,255,255,0.75);
margin: .5rem
}
.slideshow .ctrl a:hover,.slideshow .ctrl a.active {
color: #fff
}
.slideshow .thumb {
z-index: 101;
position: absolute;
bottom: 3rem;
left: 3.25rem
}
.slideshow .thumb a {
display: inline-block;
width: .5rem;
height: .5rem;
margin: .25rem;
border-radius: .5rem;
background-color: rgba(255,255,255,0.45)
}
.slideshow .thumb a.active {
background-color: rgba(255,255,255,0.85)
}
.open .slideshow {
margin-top: 480px
}
.onslide .intro {
transform: translate3d(0,-100%,0) translate3d(0,250px,0)
}
.slide {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
background: #fff;
-webkit-transform-origin: 50% 120%;
transform-origin: 50% 120%
}
.slide::after {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
background: #fff;
content: '';
opacity: 0;
-webkit-transition: opacity 4s;
transition: opacity 4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1)
}
.slideshow blockquote p {
overflow: hidden;
text-overflow: ellipsis;
padding: 0 .25rem
}
.slideshow>p {
line-height: 1.5;
font-size: 0.85em;
font-weight: bold
}
.slideshow blockquote {
z-index: 1001;
position: absolute;
bottom: 3rem;
left: 3rem;
right: 3rem;
padding: 0;
padding-bottom: 1rem;
border-left: none;
color: #fff;
text-align: left
}
.slideshow .bg-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 -2rem 3rem -2rem rgba(0,0,0,0.45) inset,0 -3rem 3rem -2rem rgba(0,0,0,0.45) inset,0 -4rem 5rem -4rem rgba(0,0,0,0.35) inset,0 -10rem 3rem -3rem rgba(0,0,0,0.35) inset,0 -15rem 3rem -3rem rgba(0,0,0,0.35) inset,0 -20rem 5rem -3rem rgba(0,0,0,0.35) inset;
transition: opacity 0.6s;
-webkit-transition: opacity 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1)
}
.open .slideshow .bg-overlay {
opacity: 0
}
.slideshow blockquote p {
margin: 0;
margin-bottom: 2.5rem;
padding: 0;
font-size: 4.8rem;
font-style: normal;
line-height: 1.2em
}
.slideshow blockquote .date {
font-size: 1.1rem;
color: #ccc
}
.slideshow blockquote .view-details {
display: inline-block;
padding: .5rem 1rem;
border: 1px solid rgba(255,255,255,0.55);
border-radius: .2rem;
color: #fff;
font-size: 1.4rem;
line-height: 1.2em;
box-shadow: 0 2px 4px -2px rgba(0,0,0,0.25)
}
.slideshow blockquote+p {
color: rgba(43,65,77,0.3)
}
@media screen and (max-width: 768px) {
.slideshow blockquote {
bottom:1rem;
left: 1rem;
right: 1rem;
padding-bottom: 0
}
.slideshow blockquote p {
font-size: 2.8rem;
margin-bottom: .5rem
}
.slideshow .ctrl,.slideshow .thumb {
bottom: 6rem
}
.slideshow .ctrl {
right: 1rem
}
.slideshow .thumb {
left: 1.25rem
}
}
.slider--animOutRight::after,.slider--animOutLeft::after {
opacity: 1
}
.slider--current {
position: absolute;
z-index: 100;
opacity: 1;
pointer-events: auto
}
.slider--animInRight,.slider--animInLeft {
z-index: 101;
opacity: 1
}
.slider--animInRight,.slider--animInLeft,.slider--animOutRight,.slider--animOutLeft {
-webkit-animation-timing-function: cubic-bezier(0.7,0,0.3,1);
animation-timing-function: cubic-bezier(0.7,0,0.3,1);
-webkit-animation-duration: .9s;
animation-duration: .9s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
.slider--animInRight {
-webkit-animation-name: animInRight;
animation-name: animInRight
}
.slider--animInLeft {
-webkit-animation-name: animInLeft;
animation-name: animInLeft
}
.slider--animOutRight {
-webkit-animation-name: animOutRight;
animation-name: animOutRight
}
.slider--animOutLeft {
-webkit-animation-name: animOutLeft;
animation-name: animOutLeft
}
@-webkit-keyframes animOutLeft {
to {
-webkit-transform: rotate3d(0,0,1,-20deg) translate3d(-100%,0,0);
transform: rotate3d(0,0,1,-20deg) translate3d(-100%,0,0);
opacity: 0
}
}
@keyframes animOutLeft {
to {
-webkit-transform: rotate3d(0,0,1,-20deg) translate3d(-100%,0,0);
transform: rotate3d(0,0,1,-20deg) translate3d(-100%,0,0);
opacity: 0
}
}
@-webkit-keyframes animInRight {
from {
-webkit-transform: rotate3d(0,0,1,20deg) translate3d(100%,0,0);
transform: rotate3d(0,0,1,20deg) translate3d(100%,0,0);
opacity: 0
}
to {
-webkit-transform: rotate3d(0,0,1,0deg) translate3d(0,0,0);
transform: rotate3d(0,0,1,0deg) translate3d(0,0,0)
}
}
@keyframes animInRight {
from {
-webkit-transform: rotate3d(0,0,1,20deg) translate3d(100%,0,0);
transform: rotate3d(0,0,1,20deg) translate3d(100%,0,0);
opacity: 0
}
to {
-webkit-transform: rotate3d(0,0,1,0deg) translate3d(0,0,0);
transform: rotate3d(0,0,1,0deg) translate3d(0,0,0)
}
}
@-webkit-keyframes animOutRight {
to {
-webkit-transform: rotate3d(0,0,1,20deg) translate3d(100%,0,0);
transform: rotate3d(0,0,1,20deg) translate3d(100%,0,0);
opacity: 0
}
}
@keyframes animOutRight {
to {
-webkit-transform: rotate3d(0,0,1,20deg) translate3d(100%,0,0);
transform: rotate3d(0,0,1,20deg) translate3d(100%,0,0);
opacity: 0
}
}
@-webkit-keyframes animInLeft {
from {
-webkit-transform: rotate3d(0,0,1,-20deg) translate3d(-100%,0,0);
opacity: 0
}
to {
-webkit-transform: rotate3d(0,0,1,0deg) translate3d(0,0,0);
transform: rotate3d(0,0,1,0deg) translate3d(0,0,0)
}
}
@keyframes animInLeft {
from {
-webkit-transform: rotate3d(0,0,1,-20deg) translate3d(-100%,0,0);
transform: rotate3d(0,0,1,-20deg) translate3d(-100%,0,0);
opacity: 0
}
to {
-webkit-transform: rotate3d(0,0,1,0deg) translate3d(0,0,0);
transform: rotate3d(0,0,1,0deg) translate3d(0,0,0)
}
}(function($) {
"use strict";
var animEndEventNames = {
'WebkitAnimation': 'webkitAnimationEnd',
'OAnimation': 'oAnimationEnd',
'msAnimation': 'MSAnimationEnd',
'animation': 'animationend'
}
, animEndEventName = animEndEventNames[Modernizr.prefixed('animation')]
, onEndAnimation = function(el, callback) {
var onEndCallbackFn = function(ev) {
if (ev.target != this) {
return
}
this.removeEventListener(animEndEventName, onEndCallbackFn);
if (callback && typeof callback === 'function') {
callback.call()
}
};
el.addEventListener(animEndEventName, onEndCallbackFn)
};
var $document = $(document)
, containers = [].slice.call($('.slide'))
, containersCount = containers.length
, current = 0
, isAnimating = !1
, pageTriggers = [];
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
$document.ready(function() {
$('.menu-icon').on('click', function(e) {
$('body').toggleClass('open');
$(this).toggleClass('open')
});
$('pre code').each(function(i, block) {
hljs.highlightBlock(block)
});
initSlider()
});
document.addEventListener('keydown', function(ev) {
var keyCode = ev.keyCode || ev.which
, isNavOpen = $('body').hasClass('open');
switch (keyCode) {
case 37:
if (current > 0 && !isNavOpen) {
navigate(pageTriggers[current - 1])
}
break;
case 39:
if (current < containersCount - 1 && !isNavOpen) {
navigate(pageTriggers[current + 1])
}
break
}
});
function initSlider() {
var thumbString = '';
containers.forEach(function(item, index) {
thumbString += '<a href="javascript:;" ' + (index === 0 ? 'class="active" ' : '') + '></a>'
});
if (containers.length > 1) {
var ctrlString = '';
if (!isMobile) {
ctrlString = '<div class="ctrl"><a href="javascript:;" class="js-ctrl-left" ><svg class="icon icon-rewind"><use xlink:href="#icon-rewind"></use></svg></a><a href="javascript:;" class="js-ctrl-right icon-angle-right" ><svg class="icon icon-fast-forward"><use xlink:href="#icon-fast-forward"></use></svg></a></div>'
}
$('#slideshow').append([ctrlString, '<div class="thumb">', thumbString, '</div>'].join(''));
bindEvent()
}
pageTriggers = [].slice.call($('.thumb a'));
$(containers[current]).addClass('slider--current')
}
function bindEvent() {
$('.js-ctrl-left').on('click', function() {
if (current > 0) {
navigate(pageTriggers[current - 1])
}
});
$('.js-ctrl-right').on('click', function() {
if (current < containersCount - 1) {
navigate(pageTriggers[current + 1])
}
});
if (isMobile) {
$("#slideshow").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') {
if (current < containersCount - 1) {
navigate(pageTriggers[current + 1])
}
} else if (direction == 'right') {
if (current > 0) {
navigate(pageTriggers[current - 1])
}
} else if (direction == 'down') {
var sT = $('html').scrollTop();
if (sT == 0) {
$('body').toggleClass('open');
$('.menu-icon').toggleClass('open')
} else {
$('html').animate({
'scrollTop': 0
}, 500)
}
} else if (direction == 'up') {
return !1
}
},
threshold: 0,
allowPageScroll: 'vertical',
})
}
}
function navigate(pageTrigger) {
var oldcurrent = current
, newcurrent = pageTriggers.indexOf(pageTrigger);
if (isAnimating || oldcurrent === newcurrent)
return;
isAnimating = !0;
var currentPageTrigger = pageTriggers[current]
, nextContainer = containers[newcurrent]
, currentContainer = containers[current]
, dir = newcurrent > oldcurrent ? 'left' : 'right';
$(currentPageTrigger).removeClass('active');
$(pageTrigger).addClass('active');
current = newcurrent;
$(nextContainer).addClass(dir === 'left' ? 'slider--animInRight' : 'slider--animInLeft');
$(currentContainer).addClass(dir === 'left' ? 'slider--animOutLeft' : 'slider--animOutRight');
onEndAnimation(currentContainer, function() {
$(currentContainer).removeClass(dir === 'left' ? 'slider--animOutLeft' : 'slider--animOutRight');
$(nextContainer).removeClass(dir === 'left' ? 'slider--animInRight' : 'slider--animInLeft');
$(currentContainer).removeClass('slider--current');
$(nextContainer).addClass('slider--current');
isAnimating = !1
})
}
})(jQuery)
External CSS
This Pen doesn't use any external CSS resources.