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, topbottom参数来调整它的行为。
  • leave:当指定元素离开视口时触发。可以通过mode, topbottom参数来调整它的行为。
  • 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, topbottom参数来做进一步的调整。

mode

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

取值 行为
default 元素和视口的接触面积在视口之内。
top 顶部视口边缘在元素之内。
bottom 底部视口边缘在元素之内。
middle 顶部或底部视口边缘在元素的中间。

top和bottom

通过topbottom参数可以移动元素和视口的接触面积,可以使用像素值,百分比值,或视口的百分比值(如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