Javascript 如何在登录页中设置分割图像（产品图像）不同层的动画

我想在用户滚动到部分时设置产品图像分割的动画。i、 e.当用户向下滚动并进入产品图像部分时，我想触发显示产品不同层/组成的动画。就像这里一样（向下滚动到登录页后的第二部分）：

---

首选纯CSS3解决方案。不过，也欢迎使用jQuery、GSAP等任何库解决方案。

您可以使用scrollmagic库

文档示例：

//定义图像
变量图像=[
“../../img/example_imagesequence_01.png”，
“../../img/example_imagesequence_02.png”，
“../../img/example_imagesequence_03.png”，
“../../img/example_imagesequence_04.png”，
“../../img/example_imagesequence_05.png”，
“../../img/example_imagesequence_06.png”，
“../../img/example_imagesequence_07.png”
];
//TweenMax可以连接任何对象的任何属性。我们使用这个对象在数组中循环
var obj={curImg:0}；
//制造吐温
变量吐温=吐温最大值至（obj，0.5，
{
curImg:images.length-1，//将属性curImg设置为图像数
roundProps：“curImg”，//仅限整数，因此可以将其用作数组索引
重复：3，//重复3次
Immediater:true，//自动加载第一个图像
ease:Linear.easeNone，//以相同的时间量显示每个图像
onUpdate:函数（）{
$（“#myimg”）.attr（“src”，images[obj.curImg]）；//设置图像源
}
}
);
//初始化控制器
var controller=new ScrollMagic.controller（）；
//构建场景
var scene=new ScrollMagic.scene（{triggerement:#trigger'，持续时间：300}）
.塞特温（吐温）
.addIndicators（）//添加指示器（需要插件）
.addTo（控制员）；
//处理表格更改
$（“form.move输入[name=duration]：radio”）.change（函数（）{
scene.duration（$（this.val（））；
});你看过他们是怎么做的吗？这是一个简单的精灵替代品你可以用它的精灵替代品。但它们如何在滚动位置触发