JS实现滚动图像以更改文本视差效果

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

这篇文章使用第三方动画库GSAP实现滚动图像以更改文本视差效果

通过码上掘金查看动画效果

逻辑解析

山的背景是几个山的单独图片和云组成的

初始化通过gsap设置了各自的样式

gsap.timeline({scrollTrigger:{trigger:'.scrollDist', start:'top top', end:'bottom bottom', scrub:1}})
    .fromTo('.sky', {y:0},{y:-200}, 0)
    .fromTo('.cloud1', {y:100},{y:-800}, 0)
    .fromTo('.cloud2', {y:-150},{y:-500}, 0)
    .fromTo('.cloud3', {y:-50},{y:-650}, 0)
    .fromTo('.mountBg', {y:-10},{y:-100}, 0)
    .fromTo('.mountMg', {y:-30},{y:-250}, 0)
    .fromTo('.mountFg', {y:-50},{y:-600}, 0)

timeline代表了动画的时间线顺序，使控制它们作为一个整体变得简单并精确地管理它们的时间,fromTo表示从什么状态到什么状态

scrollTrigger用到了GSAP官方的一个插件ScrollTrigger，可以控制scroll触发动画的条件，具体参考文档链接

scrollTo用到了GSAP官方的一个插件ScrollTo，可以控制scroll滚动，具体参考文档链接

我们点击下拉按钮就可以触发这个滚动，这个时候触发了scrollTrigger的条件，对应的动画也就执行

$('#arrowBtn').on('click', (e)=>{ gsap.to(window, {scrollTo:innerHeight, duration:1.5, ease:'power1.inOut'}); }) // scrollTo requires the ScrollTo plugin (not to be confused w/ ScrollTrigger)

gsap.set('.scrollDist', {width:'100%', height:'200%'})

设置了两倍的高度，使用出现了滚轴，滚动也会触发文本视差效果

下面代码控制按钮当鼠标移动到和移出的效果

$('#arrowBtn').on('mouseenter', (e)=>{ gsap.to('.arrow', {y:10, duration:0.8, ease:'back.inOut(3)', overwrite:'auto'}); })
$('#arrowBtn').on('mouseleave', (e)=>{ gsap.to('.arrow', {y:0, duration:0.5, ease:'power3.out', overwrite:'auto'}); })

总结

借助GSAP可以很简单实现一系列复杂的动画效果，后面还会继续研究更好的实现方式