css:animate.css@4.1.1和wow.js实现网页动画效果

简介: css:animate.css@4.1.1和wow.js实现网页动画效果

文档

wow.js: https://wowjs.uk/docs.html

animate.css: https://animate.style/

CDN

https://www.bootcdn.cn/wow/

https://www.bootcdn.cn/animate.css/

通过以下代码就能很容易实现一个加载动画

<!-- 引入样式 animate.css -->
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css"
        rel="stylesheet">
<style>
.box {
  width: 300px;
  height: 300px;
  background-color: #eeeeee;
}
</style>
<!-- 必须加类名:animate__animated -->
<!-- 动画效果:animate__swing -->
<div class="box animate__animated animate__swing"></div>

如果元素不在第一屏幕,就不能看到动画效果,可以通过wow.js解决



<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css"
        rel="stylesheet">
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: #eeeeee;
      /* 让元素在下一屏幕显示 */
      margin-top: 1000px;
    }
  </style>
  <!-- 增加一个类名:wow -->
  <div class="box wow animate__animated animate__swing"></div>
  <!-- 引入并初始化 wow -->
  <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
  <script>
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animate__animated',
      offset: 0,
      mobile: true,
      live: true
    });
    wow.init();
  </script>

在线Demo:https://mouday.github.io/front-end-demo/animate-wow.html

相关文章
|
6天前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
8天前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
10天前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
|
11天前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
24 0
JS配合CSS3实现动画和拖动小星星小Demo
|
25天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
6天前
|
JavaScript 前端开发
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
|
8天前
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
8天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
9天前
|
前端开发 JavaScript
前端JS控制网页复制粘贴
前端JS控制网页复制粘贴