本文将介绍一种用于创建滚动故事（Scrollytelling）的 NPM 包，该包名为 Scrollytelling。这个 NPM 包主要用来创建交互式故事页面，比如像下雪的时候展示雪天里的种种。Scrollytelling 允许开发者根据页面滚动位置的变化触发不同的动画与效果，让用户可以逐步展示故事情节，吸引用户的眼球。以下将详细介绍 Scrollytelling 的使用方法。
安装 Scrollytelling
在安装 Scrollytelling 前，需要先安装 Node.js ，Node.js 是一种开源的服务器端运行环境，提供了 JavaScript 的解释执行环境。通过 Node.js，我们可以在后端使用 JavaScript，开发服务器端应用程序。具体安装方法详见官网 Node.js。安装完成之后，在终端运行下面命令即可轻松安装 Scrollytelling：
npm install scrollytelling
Scrollytelling 还需要依赖一个名为 GSAP 的 JavaScript 动画库，同样我们使用 NPM 安装：
npm install gsap
Scrollytelling 的基础用法
首先，需要在你的 HTML 页面中添加一个相应的容器组件：
<div id="container"> <section class="panel"></section> <section class="panel"></section> <section class="panel"></section> </div>
然后在 JavaScript 中启用 Scrollytelling
import ScrollStory from 'scrollytelling';
// 获取 HTML 中对应的容器组件
const container = document.querySelector('#container');
// 实例 Scrollytelling 对象
const scrollStory = new ScrollStory(container);现在可以在 HTML 中设定故事版面的细节，用一些属性设定动画和过渡效果，如下所示：
<section class="panel" data-step="0" data-opacity="1">...</section>
这里，data-step 属性设定了当前区块在 Scrollytelling 时间轴上的位置，这样 Scrollytelling 就能在用户滚动到不同位置时，依次激活/反激活各个 section，使它们按顺序表现出来。data-opacity 属性是为 panel 容器对象设定的大小和透明度参数。
在 Scrollytelling 启用后，需要依次设置各个 section 的动画效果，可以使用 Scrollytelling 提供的 addScene() 方法来实现：
-- -------------------- ---- -------
----------------------
--------- --
-------- -
------ ---- -----
---- ------- -----
--
------ -
-------- -
------ --
---- --
--
--
---这里的 addScene 中，duration 参数意味着当前 tween（限制时间）在多少秒内完成。trigger 参数和 tween 参数都非常重要，前者指定 Scrollytelling 触发位置，而 Tween 则提供动画具体效果。上面的代码就是当当前 panel 区块的滚动位置在距离容器 div 的顶部 10% 的时候，开始触发一个状态改变，左半透明显示，右半透明消失。
Scrollytelling 进阶用法
除了基础用法外，Scrollytelling 也还有许多更加高级的用法，例如 creating a left and right responsive panel layout（创建左右相对布局的故事页面） 组件，实现吸引人又实用的 Scrollytelling 效果。示例代码如下：
-- -------------------- ---- ------- ------ ----------- ---- ----------------- ----- --------- - ---------------------------------- ----- ----------- - --- ----------------------- ---------------------- ------ ----------------- ------ ------ ------- ----- -------- ------ ---------- --- ---------------------- ------ ----------------- ------ ------- ------- ----- -------- ----- ------ ---------- ----------- ---------- ---
这里 addPanel 方法允许我们添加一个具有左右布局的区块，image 为左侧图片，title 和 text 则是右侧上方的文本信息，而 background 为整个 panel 区域的背景色。
以上就是 Scrollytelling 的使用技巧与方法，借助 Scrollytelling 和 GSAP，可以让开发者简单快捷地创建出动态的滚动故事页面，增添前端页面设计的乐趣，让用户体验更上一层楼。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562da81e8991b448e03d2