如何在着陆页中动画分割图像的不同图层（产品图像）

Question

我希望在用户滚动到该部分时动画分割产品图像。即，当用户向下滚动并进入产品图像部分时，我想触发显示产品的不同层/组成的动画。就像在这里完成一样（在登陆页面后向下滚动到第二部分）：

https://simbasleep.com/

首选纯CSS3解决方案。但是，任何库解决方案，如jQuery，GSAP等也是受欢迎的。

Answer 1

您可以使用scrollmagic lib http://scrollmagic.io/examples/expert/image_sequence.html

DOCS示例：

＆＃13;

＆＃13;

// define images
	var images = [
		"../../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 can tween any property of any object. We use this object to cycle through the array
	var obj = {curImg: 0};

	// create tween
	var tween = TweenMax.to(obj, 0.5,
		{
			curImg: images.length - 1,	// animate propery curImg to number of images
			roundProps: "curImg",				// only integers so it can be used as an array index
			repeat: 3,									// repeat 3 times
			immediateRender: true,			// load first image automatically
			ease: Linear.easeNone,			// show every image the same ammount of time
			onUpdate: function () {
			  $("#myimg").attr("src", images[obj.curImg]); // set the image source
			}
		}
	);

	// init controller
	var controller = new ScrollMagic.Controller();

	// build scene
	var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300})
					.setTween(tween)
					.addIndicators() // add indicators (requires plugin)
					.addTo(controller);

	// handle form change
	$("form.move input[name=duration]:radio").change(function () {
		scene.duration($(this).val());
	});

＆＃13;

＆＃13;

＆＃13;