网页入场动画之 Animate

2024-03-27 23:50
文章标签 网页 动画 入场 animate

本文主要是介绍网页入场动画之 Animate,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

话不多说看效果

提示: gif不动了就刷新下页面 !!!!!!!!!!!!!!!!

在这里插入图片描述
仔细看 Animate 就是动态添加一些它自己封装的一些样式类 这就是用法
但是类前面必须加 animate__animated
在这里插入图片描述

1、安装 animate

npm install animate.css --save

2、main 引入

import animated from 'animate.css' // npm install animate.css --save安装,再引入
Vue.use(animated)

下面就是一些动态添加样式的方法

Animate 还有很多的动画 这只是冰山一角 具体可以去 去官网看
这里我加了鼠标滚动监听,上滚删类 下滚添加类

// 这是一个vue的组件  可直接拿走  引入的组件是下一段代码
<template><div class="hello"><h1 :class="css1">帅帅1</h1><h2 :class="css2">帅帅2</h2><h3 :class="css3">帅帅3</h3><h4 :class="css4">帅帅4</h4><Hell2></Hell2></div>
</template><script>
import Hell2 from "./hell2.vue";
export default {name: "HelloWorld",components: {Hell2},data() {return {css1: "",css2: "",css3: "",css4: ""};},created() {this.cssa();this.cssb();this.cssc();this.cssd();},mounted() {window.addEventListener("scroll", this.handleScroll, true); // 监听(绑定)滚轮 滚动事件},methods: {css() {this.css1 = "";this.css2 = "";this.css3 = "";this.css4 = "";},cssa() {this.css1 = "animate__animated animate__fadeInLeft ";},cssb() {this.css2 = "animate__animated animate__fadeInRight";},cssc() {this.css3 = "animate__animated animate__bounceInDown animate__delay-1s";},cssd() {this.css4 = "animate__animated animate__bounceInUp animate__delay-1s";},handleScroll() {// 监听鼠标滚动// 页面滚动距顶部距离var scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;var scroll = scrollTop - this.i;this.i = scrollTop;if (scroll < 0) {// 鼠标上滚this.css();} else {// 鼠标下滚this.cssa();this.cssb();this.cssc();this.cssd();}}}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {// height: 1500px;display: flex;flex-wrap: wrap;background-size: c;background: url(../assets/bg.png) no-repeat;h1 {width: 50%;margin-top: 300px;text-align: center;height: 200px;line-height: 200px;background: #333;}h2 {margin-top: 300px;width: 50%;text-align: center;height: 200px;line-height: 200px;background: #444;}h3 {width: 50%;text-align: center;height: 200px;line-height: 200px;background: #555;margin: 0;}h4 {width: 50%;text-align: center;height: 200px;line-height: 200px;background: #666;margin: 0;}
}
</style>

这里面有组件进入可视区域监听

// 这是上面引入的那个组件  改吧改吧就是你想要的效果
<template><div class="hello"><h5 :class="css5">帅帅5</h5><h6 :class="css6">帅帅6</h6></div>
</template><script>
export default {name: "HelloWorld",data() {return {css5: "",css6: ""};},created() {},mounted() {window.addEventListener("scroll", this.scrollHandle, true); // 监听 监听元素是否进入/移出可视区域},methods: {csse() {this.css5 ="animate__animated animate__fadeInTopLeft animate__delay-0.5s animate__slow-5s";// window.removeEventListener('scroll', this.scrollHandle, true); // 记得在适当的时候移除事件监听},cssf() {this.css6 ="animate__animated animate__fadeInRightBig animate__delay-0.5s animate__slow-5s";// window.removeEventListener('scroll', this.scrollHandle, true); // 记得在适当的时候移除事件监听},scrollHandle() {const offset = this.$el.getBoundingClientRect();const offsetTop = offset.top;const offsetBottom = offset.bottom;// const offsetHeight = offset.height;// 进入可视区域// console.log(offsetTop,offsetBottom)if (offsetTop <= window.innerHeight && offsetBottom >= 0) {// console.log('进入可视区域');// do something...this.csse();this.cssf();} else {// console.log('移出可视区域');// this.enabledPause = false;// do something...this.css5 = "";this.css6 = "";}}}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {height: 1500px;display: flex;flex-wrap: wrap;width: 100%;margin-top: 500px;overflow: hidden;h5 {width: 50%;text-align: center;height: 200px;line-height: 200px;background: #777;margin: 0;}h6 {width: 50%;text-align: center;height: 200px;line-height: 200px;background: #888;margin: 0;}
}
</style>

-----------------------------------------------你在变强 也在变亮--------------------------------------------------

这篇关于网页入场动画之 Animate的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/853815

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

禁止复制的网页怎么复制

禁止复制的网页怎么复制 文章目录 禁止复制的网页怎么复制前言准备工作操作步骤一、在浏览器菜单中找到“开发者工具”二、点击“检查元素(inspect element)”按钮三、在网页中选取需要的片段,锁定对应的元素四、复制被选中的元素五、粘贴到记事本,以`.html`为后缀命名六、打开`xxx.html`,优雅地复制 前言 在浏览网页的时候,有的网页内容无法复制。比如「360

用Unity2D制作一个人物,实现移动、跳起、人物静止和动起来时的动画:中(人物移动、跳起、静止动作)

上回我们学到创建一个地形和一个人物,今天我们实现一下人物实现移动和跳起,依次点击,我们准备创建一个C#文件 创建好我们点击进去,就会跳转到我们的Vision Studio,然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类,继承自MonoBehaviour{private Rigidbo

火语言RPA流程组件介绍--浏览网页

🚩【组件功能】:浏览器打开指定网址或本地html文件 配置预览 配置说明 网址URL 支持T或# 默认FLOW输入项 输入需要打开的网址URL 超时时间 支持T或# 打开网页超时时间 执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待的时间 UserAgent 支持T或# User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器

起点中文网防止网页调试的代码展示

起点中文网对爬虫非常敏感。如图,想在页面启用调试后会显示“已在调试程序中暂停”。 选择停用断点并继续运行后会造成cpu占用率升高电脑卡顿。 经简单分析网站使用了js代码用于防止调试并在强制继续运行后造成电脑卡顿,代码如下: function A(A, B) {if (null != B && "undefined" != typeof Symbol && B[Symbol.hasInstan

(入门篇)JavaScript 网页设计案例浅析-简单的交互式图片轮播

网页设计已经成为了每个前端开发者的必备技能,而 JavaScript 作为前端三大基础之一,更是为网页赋予了互动性和动态效果。本篇文章将通过一个简单的 JavaScript 案例,带你了解网页设计中的一些常见技巧和技术原理。今天就说一说一个常见的图片轮播效果。相信大家在各类电商网站、个人博客或者展示页面中,都看到过这种轮播图。它的核心功能是展示多张图片,并且用户可以通过点击按钮,左右切换图片。

动画AnimationDrawable、转动

现实开发中:很多地方都用到 点击动画的特效; 本案例本人做了三个关于“动” 画 的效果; 先上图: 总体图: A: B: 1:点击图片按钮,效果是:图片闪动; 通过在xml中定义:标签:animation-list来实现点击动画的效果;  是否循环标签:oneshot ;   时间间隔标签:duration ; 要显示的图片标签:drawable ;