zoukankan      html  css  js  c++  java
  • Tools(2) wow.js动画生成 免监听scroll

    1.首先引入 animate.css(引入动画css)

    示例:

    <p  class="wow bounceInRight" data-wow-duration="0.5"  data-wow-delay="1s" data-wow-iteration=3>测试文字2</p>

    2.在body尾巴引入 wow.js(引入js)
       引入之后咱们给他初始化
       <script type="text/javascript">

    new WOW().init();
    </script>

    data-wow-duration:改变动画时间
    data-wow-delay:延迟在动画开始之前
    data-wow-offset:距离开始动画(浏览器底部)
    data-wow-iteration:动画重复的次数

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link href="animate.css" rel="stylesheet" media="all">
    
    	
    	<style>
    	h1{
    		color: #f35626;
    		
    	}
    	p{
    		font-size: 30px;
    		color: #f35626;
    		
    	}
    	.dd{
    		background: red;
         400px;height:880px;border: 11px solid red;
      }
    </style>
    </head>
    <body>
    	<div class="dd"></div>
    	<div class="wow lightSpeedIn">
    		Content to Reveal Here
    	</div>
    	<div class="wow bounce" >102120120</div>
    	<div class="dd"></div>
    	<h1>简单测试文字</h1>
    	<p  class="wow bounceInRight" data-wow-duration="2s" data-wow-delay="0.1s" >测试文字2</p>
    	<script src="wow.min.js"></script>
    	<script type="text/javascript">
    		new WOW().init();
    	</script>
    </body>
    </html>
    <!-- //asdasd 
    动画效果 
    
    1.这个依赖aninate.css
    2.初始化WOW 记得大写
    https://blog.csdn.net/weixin_40292626/article/details/80277182
    
    
    
    -->
    

      



  • 相关阅读:
    Linux C下的正则表达式
    中英文i18 vue参数传递
    es map的用法
    webpack中publicPath问题
    prop中如何获取vue data中的数据 中英文方案
    利用map reduce方法将对象转成数组
    WPF 踩坑笔记2
    WPF 踩坑笔记1
    RabbitMQ 高阶用法 之 x-expire 过期时间设置
    JANUSEC应用网关1.0发布,提供一站式安全交付能力
  • 原文地址:https://www.cnblogs.com/nice2018/p/10250795.html
Copyright © 2011-2022 走看看