使用CDN并在'nuxt.config.js'中集成。
script: [
{
src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js",
async: 'async',
ssr: false,
defer: true,
body: true,
},
{
src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js",
async: 'async',
ssr: false,
defer: true,
body: true,
},
{
src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js",
async: 'async',
ssr: false,
defer: true,
body: true,
},
] },
在组件中
Anim() {
if (process.browser && window) {
const ScrollMagic = window.ScrollMagic;
const bookTimeline = new TimelineMax({});
bookTimeline
.from(".hmbookservice-container", 0.6, {
yPercent: 20,
opacity: 0,
ease: Power4.easeOut,
clearProps: "all"
})
.from(
".hmservice-textwrap h4",
0.6,
{
xPercent: 20,
opacity: 0,
ease: Power4.easeOut,
clearProps: "all"
},
"-=.1"
)
.from(
".hmservice-btnwrap",
0.6,
{
xPercent: 20,
opacity: 0,
ease: Power4.easeOut,
clearProps: "all"
},
"-=.2"
);
const bookController = new ScrollMagic.Controller();
const bookAnimScene = new ScrollMagic.Scene({
triggerElement: ".hmbookservice-container",
reverse: false,
offset: -200
})
.setTween(bookTimeline)
.addTo(bookController);
}
}
mounted() {
if (process.browser && window) {
this.Anim();
}
}