Storyline是jQuery的一个基于滚动的动画库，它在元素进入视口时将自定义CSS样式或类应用于元素。

非常适合讲故事、单页滚动网站和登录页。

参见：

• 10个最佳滚动触发的JavaScript动画插件

如何使用它:

1.要开始，请在加载最新的jQuery库后包含主要的JavaScript故事线.js。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/storyline.js"></script>

2.在目标元素（本例中的框）上初始化插件，并在它们滚动进入或移出视口时将您自己的CSS样式（或类）应用于它们。

<section class="frame1">
  <h1>Example</h1>
  <div class="box">
  </div>
</section>
<section class="frame2">
  <h1>Keep Scrolling</h1>
  <div class="box">
  </div>
</section>
<section class="frame3">
  <h1>Frame 3</h1>
  <div class="box">
  </div>
</section>

// Cache objects
var objectsCache = {
  frame1: $('.frame1 > .box'),
  frame2: $('.frame2 > .box'),
  frame3: $('.frame3 > .box'),
};

// Initialize the plugin
$.storyline({
  frames: {
    '.frame1' : {
      onActive: function(coords, event) {
        objectsCache.frame1.css({
          transform: `scale(${coords.percent.screenPlayed/10 + 0.8})`
        });
      }
    },
    '.frame2' : {
      onActive: function(coords, event){
        objectsCache.frame2.css({
          transform: `rotate(${coords.percent.frameUnCentered}deg) scale(0.8)`
        });
      }
    },
    '.frame4' : {
      onEnter: function() {
        objectsCache.frame4.addClass('active');
      },
      onLeave: function() {
        objectsCache.frame4.removeClass('active');
      },
      scrollIntoView: true,
    },
  }
});

3.生成导航菜单以在这些帧之间导航。可以是布尔值，也可以是数组。可选择的

$.storyline({
  frames: {
   // frames here
  },
  buildMenu: ['1', '2', '3', '4', '5', '6'],
  menuSpeed: 3000, // default: 1500
});

4.启用开发模式。默认值：false。

$.storyline({
  frames: {
   // frames here
  },
  guide: true
});

5.设置当前帧与页面顶部之间的距离。默认值：0。

$.storyline({
  frames: {
   // frames here
  },
  frameTop: 20
});

6.确定是否忽略警告。默认值：true。

$.storyline({
  frames: {
   // frames here
  },
  ignoreWarnings: false
});

7.设置框架公差。可用于更松散地触发onEnter和onLeave操作。默认值：20。

$.storyline({
  frames: {
   // frames here
  },
  tolerance: 50
});

更新日志：

2022-01-10

• JS更新

2022-01-02

• 改进的菜单性能

2021-08-10

• 添加了scrollIntoView选项

2021-08-10

• 字体显示修复

2021-08-09

• 使用通用jQuery库；添加了故事情节.min.js

2021-08-06

• 现在在配置对象中设置日志级别

 

预览截图

元素进入视口时设置动画 故事线