滚动视差效果觉得是前端效果中比较复杂的一类效果了。

ScrollMagic.js可以做出非常酷炫的滚动视差效果，并且几乎可以满足所有复杂的效果情况，因为它的参数非常灵活和强大，ScrollMagic.js是对比市面上很多相同功能插件之后选择出来的一款，拥有很高的灵活性，非常强大，切图网不止一次在项目中使用过了，我们接触比较多网站前端开发对于效果有非常高的要求，其中不乏视差效果，用的好可以提升网页质感 用户体验。

但是它调试起来并不是很容易，需要反复调试，但是最后呈现的效果是很酷的，以下是一个项目复刻apple官网视差效果，附代码：

<script src="js/gsap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ScrollMagic.js" type="text/javascript" charset="utf-8"></script>
<script src="js/animation.gsap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/debug.addIndicators.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var controller = new ScrollMagic.Controller({});
</script>

<script>
// 获取视频元素
var videoElement = document.querySelector('#video1 video');
var h1 = $(window).height()*2 + $('#text1').height();

new ScrollMagic.Scene({
triggerElement: '#video1',
triggerHook: 'onLeave',
duration: h1
})
.setPin('#video1', {pushFollowers: false})
// 添加进入视图时的事件
.on('enter', function() {

// 视频存在且可以播放时自动播放
if (videoElement && videoElement.paused) {
// 处理自动播放限制（部分浏览器需要用户交互）
videoElement.play().catch(function(error) {
console.log('自动播放失败，可能需要用户交互:', error);
// 可以在这里显示一个播放按钮供用户点击
});
}
})
// 可选：离开视图时暂停视频
.on('leave', function() {

if (videoElement && !videoElement.paused) {
videoElement.pause();
}
})
.addIndicators() // add indicators (requires plugin)
.addTo(controller);


/*遮罩*/
new ScrollMagic.Scene({
triggerElement: '#text1',
triggerHook: 'onEnter',
duration: '10%'
})
.setTween( "#mask1" , 0.2 , { opacity:1}) // 触发一个 TweenMax.to tween
.addIndicators() // add indicators (requires plugin)
.addTo(controller);


/* 第二个场景：当滚动到200px位置时，设置透明度为0 */
new ScrollMagic.Scene({
// 使用窗口作为触发元素
triggerElement: '#text1',
triggerHook: 'onLeave',
duration: '10%' //持续长度为300px
// 触发位置设为200px
//offset: 0,
// 只触发一次

})
.setTween("#mask1", 0.2, { opacity: 0 })
.addIndicators({ name: "200px处" }) // 添加标识以便调试
.addTo(controller);





</script>

用到了一些复杂的情况，比如offset位移，on center的事件，on leave的事件等，非常适合作为一个demo的演示文档。

标签：ScrollMagic.js, 滚动视差