jquery.scrollex-可制作炫酷页面滚动效果的jQuery事件插件

jquery.scrollex.js是一款可制作炫酷页面滚动效果的jQuery事件插件。该插件中包含有一组预置的jQuery事件，通过这些事件，可以在页面滚动时为指定元素制作相应的动画效果。

使用方法

要使用这个jQuery插件，需要在页面中引入jquery(1.11+)和jquery.scrollex.js文件。

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollex.js"></script>                 
                

调用插件

在页面DOM元素加载完毕之后，你可以通过scrollex()方法来初始化插件。例如，在指定元素上制作进入视口和离开视口的效果：

$(function() {
  $('#foobar').scrollex({
    enter: function() {
      // Set #foobar's background color to green when we scroll into it.
        $(this).css('background-color', 'green');
    },
    leave: function() {
      // Reset #foobar's background color when we scroll out of it.
        $(this).css('background-color', '');
    }
  });
});
                

事件

jquery.scrollex.js插件支持以下一些事件。

• enter：当指定元素进入视口时触发。可以通过mode, top和bottom参数来调整它的行为。
• leave：当指定元素离开视口时触发。可以通过mode, top和bottom参数来调整它的行为。
• initialize：当scrollex()方法在某个元素上调用时触发。
• terminate：当unscrollex()方法在某个元素上调用时触发，它的作用是撤销前一个scrollex()调用。
• scroll：在某个元素滚动通过视口时触发。例如：

  $(function() {
    $('#foobar').scrollex({
      scroll: function(progress) {
  
        // Progressively increase #foobar's opacity as we scroll through it.
          $(this).css('opacity', Math.max(0, Math.min(1, progress)));
  
      }
    });
  });
  

mode, top和bottom

元素在视口中的位置可以通过mode, top和bottom参数来做进一步的调整。

mode

用于决定元素和视口的接触面积，判断一个元素是否在视口之内。可以是下面的一些取值：

top和bottom

通过top和bottom参数可以移动元素和视口的接触面积，可以使用像素值，百分比值，或视口的百分比值(如20vh)。正值向视口内部移动，负值向视口外部移动。例如：

$(function() {
  $('#foobar').scrollex({
    top: '-20%',
    bottom: '-20%',
    enter: function() {
      $(this).css('background-color', 'green');

    },
    leave: function() {
      $(this).css('background-color', '');
    }
  });
});                  
                

jquery.scrollex.js插件的github地址为：https://github.com/n33/jquery.scrollex