javascript - 如何在着陆页中对图像(产品图像)的不同层进行动画拆分

Question

当用户滚动到该部分时，我想为产品图像的拆分设置动画。即当用户向下滚动并进入产品图片部分时，我想触发显示产品不同层/组成的动画。就像在这里完成的一样(向下滚动到着陆页后的第二部分):

https://simbasleep.com/

首选纯 CSS3 解决方案。但是，也欢迎使用任何库解决方案，例如 jQuery、GSAP 等。

Answer 1

你可以使用 scrollmagic 库 http://scrollmagic.io/examples/expert/image_sequence.html

文档示例:

// 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());
	});