jQuery时光轴插件_垂直滚动时光轴插件

今天无意间发现一个非常棒的特效、一个非常棒的时光轴动画特效、jQuery旅行者竖直时间轴、Demo是一款时间轴样式代码、一般用于旅行者的行程等方面、而且在滑动的时候也有动画效果哦、可以先看看效果图

HTML代码

<section class="timeline">
  <div class="wrapper">
    <div class="timeline__item timeline__item--0">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1977 Aug. 20</h2>
        <p class="timeline__item__content__description">Voyager 2 launched from Kennedy Space Flight Center</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--1">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1977 Sept. 5</h2>
        <p class="timeline__item__content__description">Voyager 1 launched from Kennedy Space Flight Center, Voyager 1 returns first spacecraft photo of Earth and Moon</p>
      </div>
    </div>
  </div>
</section>

JS代码

function customWayPoint(className, addClassName, customOffset) {
  var waypoints = $(className).waypoint({
    handler: function(direction) {
      if (direction == "down") {
        $(className).addClass(addClassName);
      } else {
        $(className).removeClass(addClassName);
      }
    },
    offset: customOffset
  });
}

var defaultOffset = ´50%´;

for (i = 0; i < 17; i  ) {
  customWayPoint(´.timeline__item--´   i, ´timeline__item-bg´, defaultOffset);
}

以上是Demo的部分代码片段以及使用方法、希望对大家有用、下面给大家贴上Demo的源代码下载

jquery时光轴插件实例Demo源代码下载链接: jquery时光轴插件 密码: rjap