• js实现在可视区内，文字图片动画效果

    利用wow.min.js， animate.css 用户滚动页面的时候展示 CSS 动画效果。
    官网：Animate中文网 – Animate安装、Animate使用、Animate下载

    下载地址：http://www.bootcdn.cn/wow/
    案例演示：animate.css动画演示_dowebok

    1、加入animate.css

    <link href="http://www.bbsxiaomi.com/case/css/animate.min.css" rel="stylesheet">或

    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">

    2、加入wow.js 。（无需引用jQuery）

    <script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>
    注意new WOW().init();中的WOW要大写，否则就没效果了。

    3、元素中加入class

    <div class="wow animated tada">tada</div>

    4、wow.js 使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

    <script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>

    <script>

    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){

        new WOW().init();

    };
    </script>

    5、可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如.（在css下方js上方写需要动画的元素（必须设置为块状或者行内块状！必须设置为块状或者行内块状！必须设置为块状或者行内块状！），并添加class类名。)

    <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>
    类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。

附上animated的各个动画class属性

    1. fade: {
    2.         title: '淡入淡出',
    3.         fadeIn: '淡入',
    4.         fadeInDown: '向下淡入',
    5.         fadeInDownBig: '向下快速淡入',
    6.         fadeInLeft: '向右淡入',
    7.         fadeInLeftBig: '向右快速淡入',
    8.         fadeInRight: '向左淡入',
    9.         fadeInRightBig: '向左快速淡入',
    10.         fadeInUp: '向上淡入',
    11.         fadeInUpBig: '向上快速淡入',
    12.         fadeOut: '淡出',
    13.         fadeOutDown: '向下淡出',
    14.         fadeOutDownBig: '向下快速淡出',
    15.         fadeOutLeft: '向左淡出',
    16.         fadeOutLeftBig: '向左快速淡出',
    17.         adeOutRight: '向右淡出',
    18.         fadeOutRightBig: '向右快速淡出',
    19.         fadeOutUp: '向上淡出',
    20.         fadeOutUpBig: '向上快速淡出'
    21.       },
    22.       bounce: {
    23.         title: '弹跳类',
    24.         bounceIn: '弹跳进入',
    25.         bounceInDown: '向下弹跳进入',
    26.         bounceInLeft: '向右弹跳进入',
    27.         bounceInRight: '向左弹跳进入',
    28.         bounceInUp: '向上弹跳进入',
    29.         bounceOut: '弹跳退出',
    30.         bounceOutDown: '向下弹跳退出',
    31.         bounceOutLeft: '向左弹跳退出',
    32.         bounceOutRight: '向右弹跳退出',
    33.         bounceOutUp: '向上弹跳退出'
    34.       },
    35.       zoom: {
    36.         title: '缩放类',
    37.         zoomIn: '放大进入',
    38.         zoomInDown: '向下放大进入',
    39.         zoomInLeft: '向右放大进入',
    40.         zoomInRight: '向左放大进入',
    41.         zoomInUp: '向上放大进入',
    42.         zoomOut: '缩小退出',
    43.         zoomOutDown: '向下缩小退出',
    44.         zoomOutLeft: '向左缩小退出',
    45.         zoomOutRight: '向右缩小退出',
    46.         zoomOutUp: '向上缩小退出'
    47.       },
    48.       rotate: {
    49.         title: '旋转类',
    50.         rotateIn: '顺时针旋转进入',
    51.         rotateInDownLeft: '从左往下旋入',
    52.         rotateInDownRight: '从右往下旋入',
    53.         rotateInUpLeft: '从左往上旋入',
    54.         rotateInUpRight: '从右往上旋入',
    55.         rotateOut: '顺时针旋转退出',
    56.         rotateOutDownLeft: '向左下旋出',
    57.         rotateOutDownRight: '向右下旋出',
    58.         rotateOutUpLeft: '向左上旋出',
    59.         rotateOutUpRight: '向右上旋出'
    60.       },
    61.       flip: {
    62.         title: '翻转类',
    63.         flipInX: '水平翻转进入',
    64.         flipInY: '垂直翻转进入',
    65.         flipOutX: '水平翻转退出',
    66.         flipOutY: '垂直翻转退出'
    67.       },
    68.       strong: {
    69.         title: '强调类',
    70.         bounce: '弹跳',
    71.         flash: '闪烁',
    72.         pulse: '脉冲',
    73.         rubberBand: '橡皮筋',
    74.         shake: '左右弱晃动',
    75.         swing: '上下摆动',
    76.         tada: '缩放摆动',
    77.         wobble: '左右强晃动',
    78.         jello: '拉伸抖动'
    79. }
    80.  
    实例：以下是实现图片懒及动画效果

    1.  
    2. 	
    3. <!DOCTYPE html>
    4. <html lang="en">
    5. <head>
    6.   <meta charset="UTF-8">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 	<link href="js/test/animate.min.css" rel="stylesheet">
    9. 	<script src="js/jquery.min.js"></script>
    10. 	<script src="js/test//wow.min.js"></script>
    11. 	<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
    12. <script>
    13. if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    14.  
    15.     new WOW().init();
    16.  
    17. };
    18.  
    19. </script>
    20.   <title>懒加载及动画效果</title>
    21.   
    22. </head>
    23. <body>
    24. 	<div style="height: 100rem"></div>
    25.  
    26. 	<div class="img-wrap">
    27.     <img  class="lazyload wow bounceInDown"  data-wow-duration="1s" data-src="imgsrc"    /><br>
    28. 	
    29. <img  class="lazyload wow fadeInUpBig swing" data-wow-offset="50" data-src="imgsrc2"    />
    30.       
    31.   </div>    
    32.     
    33.  
    34. 	
    35. </body>
    36. </html>

    加载前

     加载后

     

  • 相关阅读:
    c++中httplib使用
    python-0004-django站点
    计算机网络 - 传输层 选择填空复习题
    30+场技术论坛 1000+科技新品发布 今年云栖大会我们关注什么？
    【重识云原生】第四章容器基础6.4.5.2节——Deployment配置详细说明
    （最新版2022版）剑指offer之树和二叉树题解
    什么是网络存储服务器
    8.3Jmeter使用json提取器提取数组值并循环(循环控制器)遍历使用
    QFramework引入Event
    深入理解RBAC
  • 原文地址：https://blog.csdn.net/jingde528/article/details/125543776