nuxt3 引入ScrollMagic_nuxt3 iscroll-CSDN博客

本文链接：https://blog.csdn.net/qq_37550593/article/details/129756294

文章展示了如何在Nuxt.js的配置文件nuxt.config.ts中引入ScrollMagic库，以及在Vue组件中创建滚动触发的动画效果。通过onMounted生命周期钩子初始化ScrollMagic控制器，并创建场景来设置动画，当滚动到特定触发元素时，改变目标元素的透明度和缩放比例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nuxt.config.ts 文件：

export default defineNuxtConfig({
    app: {
        head:{
            title: '',
            meta: [],
            script: [ // 引入顺序和scrollmagic demo 一样
                { src: "//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"},
                { src: "//cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js"},
                { src: "//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" },
                { src: "//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js"},
                process.env.NODE_ENV !== "production" ? { src: "//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" } : {}
            ]
        }        
    }
})

vue文件：

<template>
  <div>
    <div id="trigger" ></div>
    <div id="animate" class="" style="opacity: 0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolorum eligendi esse molestias odit velit voluptate voluptatum. Aliquam amet at atque eos exercitationem facilis fugiat labore, obcaecati rem repellendus tempore.
    </div>
  </div>
</template>

<script setup>
// 这里必须在onMounted之后执行
onMounted(() => {
  const controller = new ScrollMagic.Controller();
  new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
  }).setTween("#animate", 0.2, {opacity: 1, scale: 2.5}) // trigger a TweenMax.to tween
      // .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)
      .addTo(controller);
})

</script>