可制作炫酷页面滚动效果的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
用于决定元素和视口的接触面积，判断一个元素是否在视口之内。可以是下面的一些取值：
取值行为
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', '');
}
});
});