js滚动显示插件scrollappear使用

我们在平时项目中想实现滚动时想在当前屏幕给一些元素来点动画、特殊效果或者其他操作，自己写吧兼容性不好，也浪费开发时间，幸好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);

js滚动显示插件scrollappear使用

推荐阅读更多精彩内容