最常见的就是手机官网，随着用户不断向下查看，页面上的内容也会非常契合的进行变换，元素从无到有，大小的变化，视觉容器的更换，都会让人在浏览时感受到这款产品该有的魅力。可以看看这几个页面：一加 9R, ColorOS
其实实现这种交互的原理是很简单的，但要做好交互体验则需要花一定的时间去调试，不知道有没有类似的less code 可视化平台可以更方便的实现这种交互。这一切的源头就是监听页面的滚动，滚动到相应位置的时候，实现相应的动画效果
window.addEventListener("scroll",handleScroll,true)
function handleScroll(){
// 处理相应逻辑
}
在这主要介绍两个非常好用的轮子
WOW.js
用它来实现滚动到一定位置使元素淡入淡出的效果非常的简单，而且支持 animate.css 官方文档
Vue3 demo
npm install wowjs
<template>
<div class="wow move-up" />
</template>
<script>
import { defineComponent } from "vue";
import {WOW} from 'wowjs'
export default defineComponent({
name: 'app',
mounted() {
this.$nextTick(() => {
new WOW().init()
})
},
})
</script>
<style lang="scss" scoped>
.move-up {
animation: 2s move-up;
}
@keyframes move-up {
0% {
transform: translate3d(0, 30px, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translate3d(0, 0, 0);
}
}
</style>
WOW 会先让元素样式 visibility:hidden; animation-name: none;，当滚动到当前这个元素时visibility: visible再将 animation-name: none;移除，自然就有了我们自己写的 move-up动画效果了
ScrollMagic.js
这个轮子还是很强大的经典用法就是 元素随着滚动条变化而不变自己的相对位置 ScrollMagic官网
ScrollMagic例子 可以看看 sticky elements(pinning) 和 section wipes(natural)经典效果
vue3 demo
npm install scrollmagic
<template>
<div id="trigger"></div>
<div class="magic"></div>
</template>
<script>
import { defineComponent } from "vue";
import ScrollMagic from "scrollmagic";
export default defineComponent({
data(){
// 创建 controller实例
controller: new ScrollMagic.Controller(),
}
mounted(){
const scene = new ScrollMagic.Scene({
duration: 100, // 该场景生效在滚动距离100以内
offset: 50, // 该场景开始效果在元素被触发滚动50px之后触发
triggerElement: "#trigger", //滚到trigger元素触发scrollMagic
})
scene.setPin(".magic").addTo(this.controller) //setPin(): 在场景持续期间固定一个元素
scene.on("enter", function () {
console.log("Scene entered.");
});
scene.on("progress", (event) => {
console.log(event.type,"事件名称")
console.log(event.target,"触发此事件的对象")
console.log(event.progress,"反应当前场景的进度 0-1 ")
console.log(event.state,"场景当前状态：BEFORE DURING AFTER")
console.log(event.scrollDirection,"滚动的方向：PAUSED FORWARD REVERSE")
});
scene.on("end", function (event) {
console.log("Hit end point of scene.");
});
}
})
</script>
这篇文章其实主要介绍了两种滚动的轮子，有兴趣的同学可以去看看他们的官网了解更多信息
