<!-- 引入库 -->
<script src="./js/gsap.js"></script>
<script src="./js/scrollMagic.js"></script>
<script src="./js/scrollMagic-gsap.js"></script>
<script>
let sceneMac = new ScrollMagic.Scene({
// 元素从哪个节点开始触发
triggerElement:'.dom',
// 开始的位置
offset : 0,
// 结束的位置
duration : 800
})
// 挂载Dom
.setPin(".dom")
// 添加到控制器
.addTo(controller)
// 滚动时加入动画 也就是开始位置到结束位置时的过程
.setTween('.dom',1,{
opacity: 1
})
// 开始滚动时触发事件
.on('start',()=>{
console.log('start');
})
</script>
使用scrollMagic配合gsap做页面滚动效果
于 2023-02-08 17:59:33 首次发布