六、（5）H5-动画库

H5-动画库

动画库Animate.css介绍

特点

  • css特效比较多
  • 使用比较方便
  • 扩展能力强,结合jquery动态操作比较方便

 

动画库Animate.css基本效果

Bouncing 弹跳类效果

1. Bouncing Entrances 弹跳进场

样式 简介

  • bounceIn 向里，弹跳
  • bounceInDown 向里，向下,弹跳
  • bounceInLeft 向里，向左,弹跳
  • bounceInRight 向里，向右,弹跳
  • bounceInUp 向里，向上，弹跳

2. Bouncing Exits 弹跳离场

样式 简介

  • bounceOut 向外，弹跳
  • bounceOutDown 向外，向下，弹跳
  • bounceOutLeft 向里，向左，弹跳
  • bounceOutRight 向外，向右，弹跳
  • bounceOutUp 向外，各上，弹跳

3. Bouncing Demo 弹跳案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹跳效果</title>
    <link rel="stylesheet" href="../css/animate.css">
    <style>
        *{padding: 0;margin: 0;}
        h4,p{text-align: center;}
        h4{margin: 5px 0;}
        span{color: red}
        p{font-size: 13px;}
        div{overflow: hidden;margin: auto;}
        .content{width: 350px;
            height: 300px;
            background: #cccccc;
            border-radius: 10px;
            margin: 10px;
            float: left;
        }
        .backInDown{animation-delay: 1s;}/*延迟*/
    </style>
</head>
<body>
<div>
    <div class="content animated backInLeft">
        <img src="../img/01.png">
        <h4>内容咨询</h4>
        <p><span>￥680/年</span>(7天免费试用)</p>
        <p>试用于各类咨询、内容发布、<br>支持分类、评论、点赞等功能</p>
    </div>
    <div class="content animated backInDown">
        <img src="../img/02.png">
        <h4>内容咨询</h4>
        <p><span>￥680/年</span>(7天免费试用)</p>
        <p>试用于各类咨询、内容发布、<br>支持分类、评论、点赞等功能</p>
    </div>
    <div class="content animated backInRight">
        <img src="../img/03.png">
        <h4>内容咨询</h4>
        <p><span>￥680/年</span>(7天免费试用)</p>
        <p>试用于各类咨询、内容发布、<br>支持分类、评论、点赞等功能</p>
    </div>
</div>
</body>
</html>

效果图：

 

Sliding 滑动类效果

1. Sliding Entrances 滑动进场

样式 简介

  • slideInUp 向里，向上，滑动
  • slideInDown 向里，向下，滑动
  • slideInLeft 向里，向左，滑动
  • slideInRight 向里，向右，滑动

2. Sliding Exits 滑动退场

样式 简介

  • slideOutUp 向外，向上，滑动
  • slideOutDown 向外，向下，滑动
  • slideOutLeft 向外，向上，滑动
  • slideOutRight 向外，向右，滑动

Fading 渐变类效果

1. Fading Entrances 渐变进场

样式 简介

  • fadeIn 向里
  • fadeInDown 向里，向下，变大
  • fadeInDownBig 向里，向左，弹跳
  • fadeInLeft 向里，向左
  • fadeInLeftBig 向里，向左，变大
  • fadeInRight 向里，向右
  • fadeInRightBig 向里，向右，变大
  • fadeInUp 向里，向上
  • fadeInUpBig 向里，向上，变大

2. Fading Exits 渐变离场

样式 简介

  • fadeOut 向外
  • fadeOutDown 向外，向下
  • fadeOutDownBig 向外，向下，变大
  • fadeOutLeft 向外，向左
  • fadeOutLeftBig 向外，向左，变大
  • fadeOutRight 向外，向右
  • fadeOutRightBig 向外，向右，变大
  • fadeOutUp 向外，向上
  • fadeOutUpBig 向外，向上，变大

Rotating 旋转类效果

1. Rotating Entrances 旋转进场

样式 简介

  • rotateIn 向里，翻转
  • rotateInDownLeft 向里，向下，向左，翻转
  • rotateInDownRight 向里，向下，向右，翻转
  • rotateInUpLeft 向里，向上，向左，翻转
  • rotateInUpRight 向里，向上，向右，翻转

2. Rotating Exits 旋转离场

样式 简介

  • rotateOut 向外，翻转
  • rotateOutDownLeft 向外，向下，向右，翻转
  • rotateOutDownRight 向外，向下，向右，翻转
  • rotateOutUpLeft 向外，向上，向左，翻转
  • rotateOutUpRight 向外，向上，向右，翻转

Zoom 缩放类效果

1. Zoom Entrances 缩放进场

样式 简介

  • zoomIn 向里，放大
  • zoomInDown 向里，向下，放大
  • zoomInLeft 向里，向左，放大
  • zoomInRight 向外，向右，放大
  • zoomInUp 向里，向上，放大

2. Zoom Exits 缩放离场

样式 简介

  • zoomOut 向外，放大
  • zoomOutDown 向外，向下，放大
  • zoomOutLeft 向外，向左，放大
  • zoomOutRight 向外，向右，放大
  • zoomOutUp 向外，向上，放大

Attention Seekers 焦点获取类效果

样式 简介

  • bounce   弹跳
  • flash   闪
  • pulse   脉冲
  • rubberBand   橡皮筋
  • shake   摇
  • swing   摇摆
  • tada   波幅
  • wobble   摇晃
  • jello   果冻

Flippers 翻动类效果

样式 简介

  • flip 翻翻动转
  • flipInX 向里，上下，翻动
  • flipInY 向里，左右，翻动
  • flipOutX 向外，上下，翻动
  • flipOutY 向外，左右，翻动

Lightspeed 缓动类效果

样式 简介

  • lightSpeedIn   缓缓移入
  • lightSpeedOut   缓缓移出

Specials 特殊类效果

样式 简介

  • hinge 合页
  • rollIn 向里滚动
  • rollOut 向外滚动

动画库Animate.css实战操作

1. 无限重复执行：infinite

2. 延时加载：语法:delay-时间(单位:秒 仅设置:1-5s内)

3. 快慢设置：

  • fast: 800ms
  • faster: 500ms
  • slow:2s
  • slower:3s

4.2.1. 顶部上浮效果制作

　　由于顶部元素在页面开始的时候就能够显示，因此并不需要滚动事件监听来帮助。所以我们可以直接在元素上添加animated类名和对应动画效果的类名就可以实现。

<!-- 添加入场动画 过渡效果 从下向上移动 -->
<div class="bg1 animated fadeInUp"></div>

4.2.2. 中部乱序弹动效果制作

　　中部的乱序进入效果和上方的直接加载不同，并不能直接将样式添加在页面元素之上。这是因为这部分元素的动画特效是必须等到用户“滑动”到一定距离的时候才执行。换句话说如果进入页面就直接加载，那么很大的概率用户会因为还没来得及滑动而错过这个页面特效。

//监听页面的滚动事件
document.onscroll = function (){
// 获取滚动距离
var distance = document.documentElement.scrollTop;
console.log(distance);
}

然后再通过确定页面具体滑动距离的时机，在滚动事件的回调函数内判断
判断究竟什么时候，对不同的页面元素添加动画效果

// 判断当滚动到多少距离时，给对应的li添加动画类名
if(distance > 800){
//1 2 5加载
$(".area2 .list1 .item1").addClass("animated bounceInLeft slow").css("display","block");
$(".area2 .list1 .item2").addClass("animated rotateIn slow").css("display","block");
$(".area2 .list1 .item5").addClass("animated bounceInRight slow").css("display","block");
}

4.2.3. 底部乱序弹动效果制作

　　底部效果和中部效果实现差别不大，也是在页面的滚动事件中根据滚动距离来判定元素的类名何时被添加。需要注意元素最开始需要display:none来保证隐藏，因此在对元素添加动画类名的同时，还需要将元素设置为可见。

if(distance > 1865){
//1 2 5
$(".area3 .list2 .item1").addClass("animated bounceInLeft").css("display","block");
$(".area3 .list2 .item2").addClass("animated bounceInLeft").css("display","block");
$(".area3 .list2 .item5").addClass("animated bounceInRight").css("display","block");
}

4.2.4. 脚部延迟上浮效果制作

　　脚部延迟上浮效果就是使用sliding滑动类效果实现的。只不过除了滑动类效果之外，还对每一个脚部元素添加了一个延迟时间。这里很多同学肯定想要使用delay-时间的动画库特殊效果来完成，但是很可惜不行。
这是因为delay-时间是设定动画在发生之前的等待时间，而我们通过添加类名的方式来触发动画表示的含义是“立即执行动画”的含义。因此这里的delay-时间是没有效果的。

$(".ft .ft-service .item1").addClass("animated slideInUp delay-1s").css("display","inline-block");
//设置计数器
let idx = 1;
//通过定时器添加动画效果
let timer = window.setInterval(function (){
//每间隔1000毫秒，添加一个元素动画效果。
$((".ft .ft-service .item"+idx)).addClass("animated slideInUp delay-"+idx+"s").css("display","inline-block");
idx++;
//直到五个元素都添加完，清除定时器
if(idx>5){
clearInterval(timer);
}
},1000);

动画库Swiper介绍

作用

特点

  •  免费、开源
  •  稳定
  •  应用广泛
  •  文档清晰，QA完善（Question / Answer），对初学者友好
posted @ 2021-06-06 16:40  全村的希望、  阅读(317)  评论(0)  编辑  收藏  举报