通過(guò)使用ScrollMe插件，可以將靜態(tài)的頁(yè)面添加動(dòng)態(tài)的效果，讓頁(yè)面整體動(dòng)感起來(lái)，ScrollMe插件使用非常的簡(jiǎn)單，只需要在元素中添加屬性即可。
Github地址：https://github.com/nckprsn/scrollme
引入核心文件：
<script src='js/jquery.scrollme.js'></script>
在html結(jié)構(gòu)中添加屬性，示例代碼如下：
<div class="scrollme">
<div
class="animateme"
data-when="enter"
data-from="0.5"
data-to="0"
data-opacity="0"
data-translatex="-200"
data-rotatez="90"
>
Yup, that's all.
</div>
</div>
Options選項(xiàng)參數(shù)如下：
when
決定滾動(dòng)的邊界開(kāi)始和結(jié)束,有三個(gè)參數(shù)：
enter:從容器的頂部進(jìn)入視窗時(shí)退出
exit：從容器的底部進(jìn)入視窗時(shí)退出
span：從容器的頂部進(jìn)入視窗到底部進(jìn)行視窗
from & to
指定滾動(dòng)邊界內(nèi)動(dòng)畫(huà)的起始位置與結(jié)束位置，值為： 0 - 1
easing
設(shè)置動(dòng)畫(huà)的形式
"easeout": 緩沖淡出.
"easein": 緩沖淡入.
"easeinout": 淡出.
"linear": 無(wú)動(dòng)畫(huà).
crop
是否限制滾動(dòng)邊界在文檔邊界內(nèi)。值：true 和false
opacity
元素的透明度，值：0 - 1
scale, scalex, scaley & scalez
指定元素的坐標(biāo)x,y,z的數(shù)值實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)效果
rotatex, rotatey & rotatez
指定元素在X,Y和Z軸的角度旋轉(zhuǎn)數(shù)值。
translatex, translatey & translatez
指定的距離把動(dòng)畫(huà)元素沿X、Y和Z軸數(shù)值
鄂公網(wǎng)安備 42090202000212號(hào)