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

                                                                                    孝感風信網絡科技有限公司微信公眾號

                                                                                    當前位置:主頁 > 技術支持 > Javascript/JQuery > ScrollMe一個用于向網頁添加簡單滾動效果的jQuery插件

                                                                                    ScrollMe一個用于向網頁添加簡單滾動效果的jQuery插件

                                                                                    時間:2024-06-01來源:風信官網 點擊: 973次
                                                                                    通過使用ScrollMe插件,可以將靜態的頁面添加動態的效果,讓頁面整體動感起來,ScrollMe插件使用非常的簡單,只需要在元素中添加屬性即可。
                                                                                     
                                                                                    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
                                                                                    決定滾動的邊界開始和結束,有三個參數:
                                                                                     
                                                                                    enter:從容器的頂部進入視窗時退出
                                                                                    exit:從容器的底部進入視窗時退出
                                                                                    span:從容器的頂部進入視窗到底部進行視窗
                                                                                     
                                                                                    from & to
                                                                                    指定滾動邊界內動畫的起始位置與結束位置,值為: 0 - 1
                                                                                     
                                                                                    easing
                                                                                    設置動畫的形式
                                                                                     
                                                                                    "easeout": 緩沖淡出.
                                                                                    "easein": 緩沖淡入.
                                                                                    "easeinout": 淡出.
                                                                                    "linear": 無動畫.
                                                                                     
                                                                                    crop
                                                                                    是否限制滾動邊界在文檔邊界內。值:true 和false
                                                                                     
                                                                                    opacity
                                                                                    元素的透明度,值:0 - 1
                                                                                     
                                                                                    scale, scalex, scaley & scalez
                                                                                    指定元素的坐標x,y,z的數值實現滾動動畫效果
                                                                                     
                                                                                    rotatex, rotatey & rotatez
                                                                                    指定元素在X,Y和Z軸的角度旋轉數值。
                                                                                     
                                                                                    translatex, translatey & translatez
                                                                                    指定的距離把動畫元素沿X、Y和Z軸數值
                                                                                    欄目列表
                                                                                    推薦內容
                                                                                    熱點內容
                                                                                    展開
                                                                                    亚洲AV秘 无码不卡一区二区,天天一本大道久久,亚洲污视频在线观看,97超碰国产精品无码