如何优雅的使用gsap实现视差动画

一、引入插件

gsap.min.js

ScrollTrigger.min.js

插件下载地址：gsap.com/

二、定义ScrollTrigger统一处理方法

文件parallaxEffect.js

function getParallaxOpts(opts) {
  try {
    return new Function(`return ${opts}`)()
  } catch (error) {
    return new Error('视差动画参数配置错误，无法new Function获取参数')
  }
}

/**
 * 视差动画
 * @param {*} eleClass 样式类名
 */
function parallaxAnimation(eleClass) {
  // 设置标题与副标题视差效果
  const enterFunc = (elements) => {
    if (Array.isArray(elements)) {
      elements.forEach(ele => {
        let enterParallax = ele.dataset.enterParallax
        if (typeof enterParallax === 'string') {
          const opts = getParallaxOpts(enterParallax);
          gsap.to(ele, opts)
        }
      })
    }
  };
  const leaveFunc = (elements) => {
    if (Array.isArray(elements)) {
      elements.forEach(ele => {
        let leaveParallax = ele.dataset.leaveParallax
        if (typeof leaveParallax === 'string') {
          const opts = getParallaxOpts(leaveParallax);
          gsap.to(ele, opts)
        }
      })
    }
  };

  ScrollTrigger.batch([eleClass], {
    onEnter: enterFunc,
    onLeave: leaveFunc,
    onEnterBack: enterFunc,
    onLeaveBack: leaveFunc,
  })
}

三、定义动画样式

/* 视差动画-位移初始化 */
.parallax-left {
  transform: translateX(-50px);
  opacity: 0;
}
.parallax-right {
  transform: translateX(50px);
  opacity: 0;
}
.parallax-top {
  transform: translateY(-50px);
  opacity: 0;
}
.parallax-bottom {
  transform: translateY(50px);
  opacity: 0;
}

.parallax-top-left {
  transform: translate(-50px, -50px);
  opacity: 0;
}
.parallax-top-right {
  transform: translate(50px, -50px);
  opacity: 0;
}
.parallax-bottom-left {
  transform: translate(-50px, 50px);
  opacity: 0;
}
.parallax-bottom-right {
  transform: translate(50px, 50px);
  opacity: 0;
}
.parallax-opacity {
  opacity: 0;
}
.parallax-filter {
  filter: blur(5px);
}

样式说明例如：

parallax-left：走左到右，其他类似

四、使用

1、标签设置样式类名、配置属性

<div
  class="parallax-animation parallax-left"
  data-enter-parallax="{opacity: 1, x: 0, duration: 1}"
  data-leave-parallax="{opacity: 0, x: -50, duration: 1}"
>

属性说明：

data-enter-parallax：进入标签节点时执行的参数，{opacity: 1, x: 0, duration: 1}，模块回到初始位置，同时透明度为1

data-leave-parallax：离开标签节点时执行的参数，{opacity: 0, x: -50, duration: 1}，模块属性回到样式初始化的属性
参数可以添加gasp的其他配置参数，如缓冲效果 ease: ‘elastic’， {opacity: 1, x: 0, duration: 1, ease: ‘elastic’}

五、执行动画

parallaxAnimation(".parallax-animation")

这样页面使用很少的代码实现各个模块的视差位移效果，同时可以扩展其他视差效，设置不同的样式，配置对应的属性即可。

原文链接：https://juejin.cn/post/7356757888088850432 作者：云潇