0712-2888027 189-8648-0214
微信公眾號

孝感風(fēng)信網(wǎng)絡(luò )科技有限公司微信公眾號

當前位置:主頁(yè) > 技術(shù)支持 > Javascript/JQuery > ScrollMe一個(gè)用于向網(wǎng)頁(yè)添加簡(jiǎn)單滾動(dòng)效果的jQuery插件

ScrollMe一個(gè)用于向網(wǎng)頁(yè)添加簡(jiǎn)單滾動(dòng)效果的jQuery插件

時(shí)間:2024-07-16來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 1059次
通過(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結構中添加屬性,示例代碼如下:
 
<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選項參數如下:
 
when
決定滾動(dòng)的邊界開(kāi)始和結束,有三個(gè)參數:
 
enter:從容器的頂部進(jìn)入視窗時(shí)退出
exit:從容器的底部進(jìn)入視窗時(shí)退出
span:從容器的頂部進(jìn)入視窗到底部進(jìn)行視窗
 
from & to
指定滾動(dòng)邊界內動(dòng)畫(huà)的起始位置與結束位置,值為: 0 - 1
 
easing
設置動(dòng)畫(huà)的形式
 
"easeout": 緩沖淡出.
"easein": 緩沖淡入.
"easeinout": 淡出.
"linear": 無(wú)動(dòng)畫(huà).
 
crop
是否限制滾動(dòng)邊界在文檔邊界內。值:true 和false
 
opacity
元素的透明度,值:0 - 1
 
scale, scalex, scaley & scalez
指定元素的坐標x,y,z的數值實(shí)現滾動(dòng)動(dòng)畫(huà)效果
 
rotatex, rotatey & rotatez
指定元素在X,Y和Z軸的角度旋轉數值。
 
translatex, translatey & translatez
指定的距離把動(dòng)畫(huà)元素沿X、Y和Z軸數值
欄目列表
推薦內容
熱點(diǎn)內容
展開(kāi)