Vue top栏滚动显隐和文字字体颜色过渡动画效果随笔
好长时间没用css动画效果了,今天恰好在封装某个组件时用上,随笔记下。
<template>
<div class="contain">
<div v-show="isShow" class="scrollBox">
<p class="font">NEW</p>
</div>
</div>
</template>
<script>
export default {
name: 'ScrollTop',
data() {
return {
isShow: false,
};
},
mounted() {
window.addEventListener('scroll', this.scrollHandler);
},
unmounted() {
window.addEventListener('scroll', this.scrollHandler);
},
methods: {
scrollHandler() {
const top = document.documentElement.scrollTop;
console.log(top);
if (top > 100) {
// 滚动条滚动距离超过100时
this.isShow = true;
} else {
this.isShow = false;
}
},
},
};
</script>
css样式部分
<style lang="scss" scoped>
::v-deep.el-dialog__headerbtn {
font-size: 12px;
}
.scrollBox {
width: 800px;
height: 500px;
background: white;
}
.contain {
z-index: 200000;
top: 60px;
position: fixed;
font-size: 60px;
}
.font {
color: #5ba6df;
background-image: -webkit-linear-gradient(left, #c92e2e, #c02323 25%, #d8abab 50%, #c2283c 75%, #d41616 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 1s infinite linear;
font-family: Chaparral Pro Light;
letter-spacing: 2px;
font-size: 56px;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
</style>