页面滚动，元素跳动；附带jquery.scrollex.js插件
页面滚动，元素跳动；附带jquery.scrollex.js插件
在现在大多数的网站开发中，都有很多动画效果。
有些动画是页面一加载就要的，还有一些动画是需要页面滚动到那个元素才要展示的。
本文以模板之家的 “全屏Story日记本个人主页自适应模板”为例，解析这两种动画实现的方式之一。该例子除了动画的加载效果外，还有自适应相关代码（支持PC端和移动端）。
下载代码地址：http://www.cssmoban.com/cssthemes/6954.shtml
demo实例：请点击阅读原文。
使用了两种不同的实现方式（on-loading, is-inactive）。
1. 页面加载时的动画效果：
1) 页面加载完成后，给body元素添加class: on-loading,
需要实现动画的元素在body.on-loading 状态下显示为：opacity:0(需要显示出来的元素), transform: translateY(-1rem)或者其他（需要移动的元素）
2) 使用setTimeout 将class：is-loading 去掉
在没有.on-loading的情况下：实现元素的显示或移动
显示：
显示+移动：
2. 滚动到要实现动画的元素时(is-inactive)：
其实和上面的意思一样：
在未滚动到该元素时，显示假位置。
当滚动到该元素时，去掉class:is-inactive
而监听滚动事件和判断是否去掉class:is-inactive 使用的是jquery.scrollwx.js插件
二、使用方法
要使用这个jQuery插件，需要在页面中引入jquery(1.11+)和jquery.scrollex.js文件。
12 | <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()方法来初始化插件。例如，在指定元素上制作进入视口和离开视口的效果：
123456789101112 | $(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：在某个元素滚动通过视口时触发。例如：
12345678910 | $(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)。正值向视口内部移动，负值向视口外部移动。例如：
12345678910111213 | $(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
腾讯云开发者
