<video id="h99qi"><ins id="h99qi"><span id="h99qi"></span></ins></video>

        <var id="h99qi"><td id="h99qi"></td></var>
        1. <acronym id="h99qi"></acronym>
          <wbr id="h99qi"><code id="h99qi"><span id="h99qi"></span></code></wbr>

          1. <var id="h99qi"><th id="h99qi"></th></var>
            0712-2888027 189-8648-0214
            微信公眾號

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

            當前位置:主頁 > 技術支持 > Javascript/JQuery > Delighters.JS一款向下滾動頁面觸發css3動畫JS插件

            Delighters.JS一款向下滾動頁面觸發css3動畫JS插件

            時間:2024-01-23來源:風信官網 點擊: 700次
            Delighters.JS是一款向下滾動頁面,觸發css動畫。在插件的主要功能是監控頁面的內容,當頁面內容滾動到指定觸發區域時,觸發CSS3動畫效果。
            Delighters.JS一款向下滾動頁面觸發css3動畫JS插件
             
            官方地址:https://q42.github.io/delighters/
             
            github地址:https://github.com/Q42/delighters
             
            使用指南
             
            引入Delighters.JS文件
             
            <script type="text/javascript" src="delighters.js">
             
            HTML結構,在DIV中添加data-delighter>屬性
            <div class="foo" data-delighter>
             
            CSS樣式
             
            內置的.started和 .ended類會自動為帶data-delighter的元素(或它的子元素)添加樣式。
             
            當插件被加載之后,每一個data-delighter屬性都會獲得一個 .delighter class類。
             
            /* when the library loads, each [data-delighter] 
            gets the .delighter class */
             
            .foo.delighter {
            transition: all .3s ease-out;
            transform: translateX(-100%);
            opacity: 0;
            }
             
            .started class類會在元素進入視口頂部0.75時添加到元素上。(最頂部為0,最底部為1)。
             
            /* the .started class is set when the top
            of [data-delighter] is at 0.75 of the viewport 
            (where 0 is top and 1 is bottom) */
             
            .foo.delighter.started {
            transform: none;
            opacity: 1;
            }
             
            .ended class類會在元素進入底口頂部0.75時添加到元素上。(最頂部為0,最底部為1)。
             
            /* an extra .ended state is set when the bottom 
            of [data-delighter] is at 0.75 of the viewport
            (where 0 is top and 1 is bottom) */
             
            .foo.delighter.started.ended {
            border: solid red 10px;
            }
             
            自定義配置參數
             
            通常情況下,插件會在DOM元素加載完畢之后自動加載。它的默認配置參數如下:
            options = {
                attribute:  'data-delighter',
                classNames: ['delighter', 'started', 'ended'],
                start:      0.75, // 默認啟動閾值
                end:        0.75, // 默認結束閾值
                autoInit:   true  // 在DOMContentLoaded時初始化
              }
             
            你可以通過下面的方法來修改插件的默認配置參數:
             
            Delighters.config({    
                // 在底部設置默認起始閾值
                start: 1,
                // 讓我們稍后手動調用Delighters.init()
                autoInit: false 
                // ... etc ...
              })
            欄目列表
            推薦內容
            熱點內容
            展開
            亚洲精品在线视频_18禁无码毛片精品久久久久久_精品熟妇无码av免费久久_午夜福利片