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

 查看演示  website  立即下载

要使用这个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

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

取值行为

default元素和视口的接触面积在视口之内。

top顶部视口边缘在元素之内。

bottom底部视口边缘在元素之内。

middle顶部或底部视口边缘在元素的中间。

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', '');
    }
  });
});

PREVIOUS:
NEXT:
基于GSAP的响应式全屏背景图片jQuery幻灯片插件
不规则图片切换特效