新博客的动画效果实现

视频无法播放，可以查看 gif 图片

Slide 切换

切换动画

slide 的切换主要是利用了transform 和 animation 两个重要的属性。而切换的时间函数则需要用到 cubic-bezier(关于贝塞尔曲线的效果可以参考这里)。然后利用少量的JS和手势库就可以完成了。

基本结构

<div id="slideshow" class="slideshow">
  <!-- slide -->       
  <div class="slide">
      <div class="bg-overlay" style="background-image:url(/content/images/2017/04/rocket-in-dark-1.jpg)"></div>
      <blockquote>
          <p>破立</p>
          <a class="view-details noSwipe" href="/fan-fu/">
            阅读详情 <svg style="margin-top:2px;" class="icon icon-fast-forward"><use xlink:href="#icon-fast-forward"></use></svg>
          </a>
      </blockquote>
  </div>
  <!-- end slide -->
  
  <!-- repeat -->
            
</div>

其中我们可以看到容器 slideshow 里面 包含你需要存放的 slide 单元。每个 slide 由一张背景图片，和标题以及导航链接组成。下来我们添加一些样式,整个slide都是用的绝对定位，占满首屏：

.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
}

关于这使用的transition后文的导航会涉及到。

接下来，我们添加slide里面的样式,

.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 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)
}

其中 .slide 是使用的绝对定位，其中关键的是设置它的旋转中心，从上面的动图也可以看到是在中心旋转。而blockquote则设置的用于显示一些基本的标题和链接挑战的样式设置。

接下来我们来实现具体的动画效果:

我们动画分为四种，即逆时针淡入与淡出，顺时针淡入与淡出。

首先我们先添加整体的动画函时间函数控制。这里主要是使用的 cubic-bezier(0.7,0,0.3,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
}

我们添加图片逆时针旋转进入的动画效果，slide上面的一张会向左旋转一定角度，然后显示在最上层。

.slider--animInLeft {
    -webkit-animation-name: animInLeft;
    animation-name: animInLeft
}

.slider--animInLeft {
    z-index: 101;
    opacity: 1
}

@-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)
    }
}

同理，我们添加从右进入的动画效果：

.slider--animInRight {
    z-index: 101;
    opacity: 1
}
.slider--animInRight {
    -webkit-animation-name: animInRight;
    animation-name: animInRight
}

@-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)
    }
}

其中我们还需要给进入的样式中设置:after伪类的效果，让它的的透明度变为1。

.slider--animOutRight::after,
.slider--animOutLeft::after {
    opacity: 1
}

同理，我们可以添加淡出的动画，分为左右两个方向。

.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 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
    }
}

这样我们的样式基本就到位了，我们需要设置当前显示slider的样式。

.slider--current {
    position: absolute;
    z-index: 100;
    opacity: 1;
    pointer-events: auto
}

这样我们的基本效果就呈现了。

接着我们添加一些边角料的样式，比如用于控制的左右切换的按钮以及slide的缩略图。

.slideshow .ctrl {
    z-index: 101;
    position: absolute;
    bottom: 3rem;
    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)
}

这些都是动态通过JS添加的，接下来我们添加JS来控制逻辑。首先我们需要引入 jQuery的库。

/* globals jQuery, document */
(function ($) {
    "use strict";
    var $document = $(document),
        containers = [].slice.call($('.slide')),
        containersCount = containers.length,
        current = 0,
        isAnimating = false,
        pageTriggers = [];
        
    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

    $document.ready(function () {
        initSlider();
    });
    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]);
            }
        });

    function navigate(pageTrigger) {
        var oldcurrent = current,
            newcurrent = pageTriggers.indexOf(pageTrigger);
        if (isAnimating || oldcurrent === newcurrent) return;
        isAnimating = true;

        var currentPageTrigger = pageTriggers[current],
            nextContainer = containers[newcurrent],
            currentContainer = containers[current],
            dir = newcurrent > oldcurrent ? 'left' : 'right';

        $(currentPageTrigger).removeClass('active');
        $(pageTrigger).addClass('active');
        // update current
        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 = false;
        });
    }


})(jQuery);

这样我们就可以就可以看到基本的效果了，其中 navigate 为最为核心的函数。主要是依据当前的slide然后去进行方向的选择，也就是添加不同的 class 。

我们看到其中有用到一些svg图标，所以我们还必须先在body里添加svg图标：

<!--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-->

添加图标样式

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    vertical-align: middle
}

导航的动画

从动画中，我们还看到了向下滑的时候，会看到导航的链接出现，也就是点击右上角的 图标按钮 后出现的效果。接下来我们再添加这样的效果。

<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&#x27;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>

基本的结构，就是简单的导航链接和控制的svg按钮。

接下来我们添加它的基本样式，它默认是只会出现一个 如下图的按钮菜单。

.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
}

其中，我们可以看到会有 .open 这个 class的存在，实际上它是作用于 body 上的。而添加 open 后，按钮的样式会有小方块变成关闭的按钮，这是用过 svg 的样式控制来实现的。而 nav 这个导航的样式也会有所变化 高度会变成 100%。同时，下面的 slideshow 也会配合动画效果，有下面的样式变化:

.open .slideshow {
    margin-top: 480px
}
.open .slideshow .bg-overlay {
    opacity: 0
}

其中距离顶部高度会变化，而且里面的图片也会变得透明，这样会有淡出的效果。

当然我们需要在 JS 中添加这些控制:

$('.menu-icon').on('click', function (e) {
    $('body').toggleClass('open');
    $(this).toggleClass('open');
});

添加手势

对于手势的支持，我们需要引入 jquery.swipe,这个时候我们添加对于手势的处理，

$("#slideshow").swipe({
  //Generic swipe handler for all directions
  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 false;
      }
  },
  threshold: 0,
  allowPageScroll: 'vertical',
});    
}

完整代码

这样我们就实现了这次新的 slide 的效果, 你可以点击回到主页查看效果。主题项目 github 地址: https://github.com/JackPu/ghost-theme

参考

• Sliding Header Layout

• TouchSwipe