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

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

需要注意的是animate.css 3.x版本和4.x版本的使用方法稍有不同

4.x版本增加了一个前缀animate__减少样式冲突

文档

CDN

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

<!-- 引入样式 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>
相关文章
|
10天前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
12天前
|
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下测试正常
|
12天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
17 4
|
10天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
12天前
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
14天前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
|
15天前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
29 0
JS配合CSS3实现动画和拖动小星星小Demo
|
10天前
|
JavaScript 前端开发
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
|
12天前
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
12天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。