js滚动显示插件scrollappear使用
2018-08-01 本文已影响97人
world_7735
我们在平时项目中想实现滚动时想在当前屏幕给一些元素来点动画、特殊效果或者其他操作，自己写吧兼容性不好，也浪费开发时间，幸好jquery提供给我们一个scrollappear插件来帮助我们做这些事情，我们只需要简单的根据要求操作即可实现效果，下面我提供一个简单的demo供大家参考。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title></title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="./js/jquery.appear.js"></script>
<style type="">
.move_1{
position: relative;
top:-400px;
opacity: 0;
}
.move_1.go{
top:50px;
opacity: 1;
transition: all 0.6s;
}
</style>
</head>
<body >
<div class=" animatedParent">
<h3 class="move_1 animated">demo1</h3>
</div>
<div style="height: 1000px;">
</div>
<div class=" animatedParent">
<h3 class="move_1 animated">demo2</h3>
</div>
<div style="height: 1000px;">
</div>
</body>
</html>
<script>
//添加动画
$('.animatedParent').appear();
$(document.body).on('appear', '.animatedParent', function(e, $affected){
var ele = $(this).find('.animated');
ele.addClass('go');
});
$(document.body).on('disappear', '.animatedParent', function(e, $affected) {
if(!$(this).hasClass('animateOnce')){
$(this).find('.animated').removeClass('go');
}
});
$(window).load(function(){
$.force_appear();
});
</script>
解析：
animatedParent和animated是自己定义的但要保证和写的js中对应class保持一致，其中go是滚动到当前屏幕时给指定的元素添加的class。
$(window).load(function(){
$.force_appear();
});
上面几行代码当浏览器加载完成后，对当前屏幕需要处理的元素，添加效果。
下面是引用的jquery.appear.js
//jquery.appear.js
/*
* jQuery appear plugin
*
* Copyright (c) 2012 Andrey Sidorov
* licensed under MIT license.
*
* https://github.com/morr/jquery.appear/
*
* Version: 0.3.3
*/
(function($) {
var selectors = [];
var check_binded = false;
var check_lock = false;
var defaults = {
interval: 250,
force_process: false
}
var $window = $(window);
var $prior_appeared;
function process() {
check_lock = false;
for (var index = 0; index < selectors.length; index++) {
var $appeared = $(selectors[index]).filter(function() {
return $(this).is(':appeared');
});
$appeared.trigger('appear', [$appeared]);
if ($prior_appeared) {
var $disappeared = $prior_appeared.not($appeared);
$disappeared.trigger('disappear', [$disappeared]);
}
$prior_appeared = $appeared;
}
}
// "appeared" custom filter
$.expr[':']['appeared'] = function(element) {
var $element = $(element);
if (!$element.is(':visible')) {
return false;
}
var window_left = $window.scrollLeft();
var window_top = $window.scrollTop();
var offset = $element.offset();
var left = offset.left;
var top = offset.top;
if (top + $element.height() >= window_top &&
top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() &&
left + $element.width() >= window_left &&
left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) {
return true;
} else {
return false;
}
}
$.fn.extend({
// watching for element's appearance in browser viewport
appear: function(options) {
var opts = $.extend({}, defaults, options || {});
var selector = this.selector || this;
if (!check_binded) {
var on_check = function() {
if (check_lock) {
return;
}
check_lock = true;
setTimeout(process, opts.interval);
};
$(window).scroll(on_check).resize(on_check);
check_binded = true;
}
if (opts.force_process) {
setTimeout(process, opts.interval);
}
selectors.push(selector);
return $(selector);
}
});
$.extend({
// force elements's appearance check
force_appear: function() {
if (check_binded) {
process();
return true;
};
return false;
}
});
})(jQuery);
