Vue 顶部栏滚动控制显隐和文字字体闪光动画效果随笔

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>

Vue 顶部栏滚动控制显隐和文字字体闪光动画效果随笔相关推荐

mui实现上下滑动控制显隐效果
概述本文讲述在mui框架下实现上下滑动控制显隐的效果. 效果实现 html <!DOCTYPE html> <html><head><meta chars ...
Wex5 组件的bind-visible属性控制显隐
1.选择需要控制显隐的组件,在bind-visible属性绑定值 2.js代码如下 3.在控制显隐的btn按钮的点击事件中,js代码如下或者有更灵活的写法this.shouldShowVersion ...
在vue项目中使用gsap，实现极佳的2d动画效果
在vue项目中使用gsap,实现极佳的2d动画效果一.GSAP是什么? 二.使用步骤 1.引入库 2.在vue中使用 3.vue组件使用gsap完整代码总结一.GSAP是什么? GSAP全称是G ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
Unity克隆物体并控制显隐
克隆物体的子物体的控制属于动态显隐控制,无法提前拖动到代码的变量之上,正好项目中遇到了,因此专门写了一个小程序测试了一下克隆物体的子物体名字的不变性,克隆的物体这里我单独命名了.主界面如下(包括了h ...
Vue.js 3.0 学习笔记（十）过渡和动画效果
一.单元素/组件过渡 1.CSS过渡控制p元素显示和隐藏 <!DOCTYPE html> <html> <head><meta charset=" ...
Vue 分别使用过渡类名 animate.css 钩子函数等实现动画效果
1. 使用过渡类名实现动画 v-enter: 进入之前元素的起始状态,还没有进入 v-enter-to: 定义进入过渡的结束状态 v-enter-active:定义进入过渡生效时的状态 v-leave ...
vue导航栏滚动下拉条上拉隐藏，下拉显示切换样式变化(源码)
目录案例1 源码如下效果如下案例2 源码如下效果如下最后案例1 源码如下 navBar内容,上拉显示navBar,下拉隐藏navBar,固定在顶部,样式切换 <template> ...
vue - 实现类似 ”视频和直播间“ 的文字弹幕飘过效果功能，支持Nuxt项目！组件源码及详细的使用示例（可自己定义弹幕样式、修改滚动速度、显示隐藏弹幕、鼠标移入悬停与点击悬停等）弹幕功能插件源码
效果图在 Nuxt.js 或 Vue.js 项目中,制作一个类似视频弹幕.直播间发言飘过弹幕效果组件,丝滑运行兼容性完美无bug. 具体功能请看下图介绍,还有很多没有列举,基本上如果你需要这种弹幕, ...

Vue 顶部栏滚动控制显隐和文字字体闪光动画效果随笔

Vue top栏滚动显隐和文字字体颜色过渡动画效果随笔

Vue 顶部栏滚动控制显隐和文字字体闪光动画效果随笔相关推荐

最新文章

热门文章