jQuery页面滚动元素进入视口发生动画特效插件

最新推荐文章于 2024-05-13 10:57:51 发布

qq947289507

最新推荐文章于 2024-05-13 10:57:51 发布

阅读量4.8k

点赞数 3

分类专栏： html

本文链接：https://blog.csdn.net/qq947289507/article/details/70739557

版权

html 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

插件名称：animate.css+jquery.aniview.min.js，基于jq

插件作用：网页元素进入视口，播放预定义的动画

如何使用：

1，引入css

2，引入jq

3，引入js

4，可以使用一个<div> 来作为动画元素的包裹元素。为该元素设置class为aniview，av-animation用于设置animate.css的动画过渡效果的class名称：<div class="aniview" av-animation="slideInRight"></div>

5，在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该插件。

$('.aniview').AniView();

或者在初始化的时候设置一些配置参数：

 
        var 
         options = { 
       
        animateThreshold: 100, 
       
        scrollPollInterval: 50 
       
        } 
       
        $( 
        '.aniview' 
        ).AniView(options);

配置参数

参数	类型	描述	默认值
animateThreshold	int	正数值表示元素进入视口指定的像素值之后才会触发动画序列，负数值表示在元素进入视口之前多少像素就触发动画序列	0
scrollPollInterval	int	测试用户滚动的频率。单位毫秒，这是jQuery内置的"scroll"事件的延伸	20

注意：任何在页面加载时就处于视口当中的元素会立刻被触发动画序列。

动画效果：

贴一端完整的项目代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>测试</title>
		<link href="css/animate.min.css" type="text/css" rel="stylesheet" />

		<style>
			.a1{height: 100px; background: #f00;margin-bottom: 50px;width: 100px;position: relative;left: 300px;}
		</style>
	</head>

	<body>
		<div class="aniview a1" av-animation="slideInRight">111111111</div>
		<div class="aniview a1" av-animation="slideInLeft">22222222</div>
		<div class="aniview a1" av-animation="slideInRight">111111111</div>
		<div class="aniview a1" av-animation="slideInLeft">22222222</div>
		<div class="aniview a1" av-animation="slideInRight">111111111</div>
		<div class="aniview a1" av-animation="slideInLeft">22222222</div>
		<div class="aniview a1" av-animation="slideInRight">111111111</div>
		<div class="aniview a1" av-animation="slideInLeft">22222222</div>
		<div class="aniview a1" av-animation="slideInRight">111111111</div>
		<div class="aniview a1" av-animation="slideInLeft">22222222</div>

		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/jquery.aniview.min.js"></script>
		<script>
			$(document).ready(function() {
				var options = {
					animateThreshold: 100,
					scrollPollInterval: 50,
				}
				$('.aniview').AniView(options);
			});
		</script>
	</body>

</html>

插件下载地址：http://pan.baidu.com/s/1c1SaDwO

参考文章：http://www.htmleaf.com/jQuery/Layout-Interface/201509092547.html

qq947289507

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
jQuery页面滚动元素进入视口发生动画特效插件

插件名称：animate.css+jquery.aniview.min.js，基于jq插件作用：网页元素进入视口，播放预定义的动画如何使用：1，引入css2，引入jq3，引入js<script src="jquery.aniview.min.js" type="text/javascript"> 4，可以使用一个来作为动画元素的包裹元素。为该元素设置
复制链接

扫一扫