1、需求：
在做网站的时候、需要加一个根据页面滚动位置进行页面变化的效果。
2、实现方案：
自己写个滚动监听也不是很复杂、但是管理维护起来比较乱。所以直接找了这个插件
3、使用：
安装
npm i vue-scrollmagic --save
载入
// main.js
import VueScrollmagic from "vue-scrollmagic"; Vue.use(VueScrollmagic, { verical: true, globalSceneOptions: { triggerHook: "onLeave" // duration: "100%" }, loglevel: 2, refreshInterval: 100 });
使用
<template>
<div id="home">
<div class="item trigger0">trigger0</div>
<div class="item trigger1">
trigger1
<div class="page1"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
scenes:[
{
scene: {
triggerElement: ".trigger0", // 触发元素
triggerHook: 0,// 定义触发器 Hook 相对于视口的位置 没弄明白
reverse: true, // 控制回滚时、是否加载动画
offset: 0, // 偏量、动画开始位置的微调、也可当作triggerElement使用、当triggerElement不存在的时候。
duration: "40%" // 动画持续进度
},
tweenElement: ".page1", // 变化元素
tween: { // 变更动画内容
css: { // 配置最终css
left: '50%' // 样式参数
}
}
},
]
}
},
mounted() {
this.scenes.map((screne, i) => {
const scene = this.$scrollmagic.scene(screne.scene)
.setTween(screne.tweenElement, screne.tween)
// .addIndicators({ name: `Scene ${i}` });
this.$scrollmagic.addScene(scene);
});
}
}
</script>
<style >
.page1{
position: absolute;
width: 20%;
height: 100%;
left: -20%;
background: red;
transform: translateX(-50%);
}
.item{
height: 100vh;
text-align: center;
position: relative;
z-index: 90;
color: #ffffff;
background: forestgreen;
border-top: 1px solid rgba(255,255,255,.1);
}
</style>
当然了，这个只是初级的应用、也就是单次动画。如果需要一个动画多次变换、那就需要深度使用了，暂时用不到就没有研究。