nuxt3 引入ScrollMagic

最新推荐文章于 2024-06-03 16:11:10 发布

海之蓝心

最新推荐文章于 2024-06-03 16:11:10 发布

阅读量340

点赞数

文章标签： vue.js 前端 Powered by 金山文档

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

版权

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>