可制作炫酷頁面滾動(dòng)效果的jQuery事件插件

要使用這個(gè)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>

調(diào)用插件

在頁面DOM元素加載完畢之后，你可以通過scrollex()方法來初始化插件。例如，在指定元素上制作進(jìn)入視口和離開視口的效果：

$(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：當(dāng)指定元素進(jìn)入視口時(shí)觸發(fā)。可以通過mode, top和bottom參數(shù)來調(diào)整它的行為。

leave：當(dāng)指定元素離開視口時(shí)觸發(fā)。可以通過mode, top和bottom參數(shù)來調(diào)整它的行為。

initialize：當(dāng)scrollex()方法在某個(gè)元素上調(diào)用時(shí)觸發(fā)。

terminate：當(dāng)unscrollex()方法在某個(gè)元素上調(diào)用時(shí)觸發(fā)，它的作用是撤銷前一個(gè)scrollex()調(diào)用。

scroll：在某個(gè)元素滾動(dòng)通過視口時(shí)觸發(fā)。例如：

$(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參數(shù)來做進(jìn)一步的調(diào)整。

mode

用于決定元素和視口的接觸面積，判斷一個(gè)元素是否在視口之內(nèi)?？梢允窍旅娴囊恍┤≈担?/p>

取值行為

default元素和視口的接觸面積在視口之內(nèi)。

top頂部視口邊緣在元素之內(nèi)。

bottom底部視口邊緣在元素之內(nèi)。

middle頂部或底部視口邊緣在元素的中間。

top和bottom

通過top和bottom參數(shù)可以移動(dòng)元素和視口的接觸面積，可以使用像素值，百分比值，或視口的百分比值(如20vh)。正值向視口內(nèi)部移動(dòng)，負(fù)值向視口外部移動(dòng)。例如：

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