Pexels供图，遵循CC共享协议
点击与滚动是传统的电脑端网页最常用的两种交互方式。透过这两种方式，数以亿计的网页成功的将自己的内容呈现给了每一个受众，缔造了过去30年辉煌的万维网世界。
然而，随着移动互联网时代的来临，对于可触屏的移动终端来说，滚动的精力成本大幅减少。这种只需要在网页上“蹭蹭”的交互方式，相较于需要内容判断的“点击”行为，其所需要花费在操作精准定位上的时间几乎为零。这对于以叙述为核心的内容型网站，会带给受众更加沉浸式的体验，也会对叙述本身带来更小的影响。
因此，滚动交互在目前的移动端领域已经逐渐成为一种主流的交互手法。而从数据新闻制作这个细分领域来说，这种滚动交互被运用的更加淋漓尽致：以滑动为主轴的图文叙述逻辑；以交互区域固定为特点的图表交互逻辑；以视差滚动为核心的平面动画逻辑等不同层面的滚动交互效果都取得了许多出人意料的呈现效果。
因此近些年，随着滚动交互应用范围的不断扩大，不少基于Javascripts开发的滚动效果库诞生了。ScrollMagic、Waypoints、Scrollma.js、graph-scroll.js、ScrollStory都是其中的重要代表。今天就让我们以ScrollMagic为案例，看看如何快速掌握基于这个库的滚动交互控制。
Pudding上Scrollma的演示效果
ScrollMagic是什么
ScrollMagic官网
ScrollMagic是John Polacek在Superscrollorama的基础上，重新改写的一种基于JavaScript的插件库。搭配其他插件库的情况下，有着高度的可定制性和可扩展性。具体来看，这个插件库主要分为三个部分。
控制器（Controller）：是ScrollMagic插件中最主要的一个类，主要用来设置被滚动交互控制的区域以及其他相关性质，是一个滚动活动的处理中心。
场景（Scene）：也是ScrollMagic插件中最主要的一个类，用于反馈、控制收到滚动情况而改变的诸多属性。本质上，其返回的只是被控制界面滚动范围的大小。而利用各种各样的条件设置，配合一些网页元素的特征变化，可以达到不同的效果。
插件库（Plugins）：是一个对ScrollMagic库的补充，具体来说包含两个动画库(GASP、Velocity)、一个监测插件（addIndicators）、一个jQuery库。
整体来看，ScrollMagic是一个功能性非常完整的库，它有着高度自由的设置权限，另外相对来说十分流畅清爽。配合有动画功能的插件，可以完成非常多效果酷炫的网页。但由于内容相对庞杂，今天我们就只讨论，如何使用ScrollMagic完成“以交互区域固定为特点的图表交互”。
三步完成
Step 1 设置控制器
在未设置控制器范围的情况下，默认监测的是整个浏览器窗口的滚动情况
Step 2 设置触发器与场景效果
利用setPin属性设置#pin1为被固定区域，同时设置持续的向下滑动的长度为300
Step 3 将设置情况返回给控制器
addTo（controller）返回情况
文档教会我们更多
看完上面的几行代码，你学会了么？
其实，我当然知道这样的几步可能会看得你很晕，但重要的是这几行代码的逻辑是整个ScrollMagic库的核心：“设置控制器——设置触发器——设置触发后的效果——将设置结果返回控制器”。掌握这样的逻辑之后，通过查询ScrollMagic库的文档，你就会打开一个新世界的大门。下面是ScrollMagic库的文档链接，想学习一下的朋友可以好好研究一下。
文/Rocky
参考资料
1.界面设计中，交互方式是选择滑动还是点击呢？ | 人人都是产品经理
2.滚动交互在网页设计中的新技巧-UI中国-专业用户体验设计平台
网友评论