jQuery创意响应式两栏滚动幻灯片特效

这是一款非常有创意的jQuery和CSS3两栏滚动幻灯片特效。该幻灯片特效将图片分为两半，在图片滚动切换时一半向上滚动，一半向下滚动，就像图片被切割开一样，效果很酷。

制作方法

HTML结构

每一幅幻灯片分为3个部分，第一部分是div.img-cont.left，这是图片的左半部分，第二部分是div.img-cont.right，这是图片的右半部分。最后是div.content，它是点击图片后进入的全屏图片的内容。

<div class="img-cont left cont-2" data-helper="-1" data-blocks="2"></div>
  <div class="img-cont right cont-2" data-helper="1" data-blocks="2"></div>
  <div class="content cont-2">
    <h2 class="title">Page 2 Content</h2>
  <p class="content-text">.....</p>
  <span class="close">+</span>
</div>            
              

CSS样式

在CSS样式中，所有图片依次排列，左边的图片依次向下减少100vh，右边的图片依次向上增加100vh。座用于制作左右图片的滚动效果，具体的滚动效果实现代码是在js中完成的。

.img-cont.cont-2.left {
  margin-top: -100vh;
}
.img-cont.cont-2.right {
  margin-top: 100vh;
}
.img-cont.cont-3.left {
  margin-top: -200vh;
}
.img-cont.cont-3.right {
  margin-top: 200vh;
}
......              
              

全屏图片的内容开始时是不可见的，在点击了左边或右边的缩略图之后，它被添加visibleclass，内容变为可见状态。

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.5);
  padding: 2rem;
  overflow-x: hidden;
  overflow-y: auto;
  color: #f9bdbb;
  z-index: 2000;
}
.content.visible {
  opacity: 1;
}              
              

CSS样式

在jQuery代码中，为了实现左右滚动效果，在HTML标签中使用data-helper实现来标记每一幅图片需要滚动的屏数。data-helper="-1"表示要向下滚动一屏，data-helper="1"表示要向上滚动一屏。然后，在jQuery代码中通过解析data-helper的值，用这个值乘以100vh来作为margin-top属性的值，实现滚动效果。

function doMargins(paramPage) {
    scrolling = true;
    var _page = paramPage || curPage;
    $left.each(function () {
        var marginMult = parseInt($(this).attr('data-helper'), 10) + _page - 1;
        $(this).attr('style', 'margin-top: ' + marginMult * 100 + 'vh');
    });
    $right.each(function () {
        var marginMult = parseInt($(this).attr('data-helper'), 10) - _page + 1;
        $(this).attr('style', 'margin-top: ' + marginMult * 100 + 'vh');
    });
    setTimeout(function () {
        scrolling = false;
    }, 1000);
}               
              

其它实现代码请参考下载文件。