1. <u id="epx8e"></u>
        <u id="epx8e"><sub id="epx8e"></sub></u>

        
        
        <video id="epx8e"><big id="epx8e"></big></video>

        <i id="epx8e"><bdo id="epx8e"><delect id="epx8e"></delect></bdo></i>
        0712-2888027 189-8648-0214
        微信公眾號

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

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

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

        時間:2023-11-02來源:風信官網 點擊: 615次
        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 ...
          })
        欄目列表
        推薦內容
        熱點內容
        展開
        亚洲AV无码乱码国产精品桃色_国产欧美亚洲精品第二区软件_精品亚洲AV无码国产一区在线_老熟妇乱子伦中文观看_日韩 欧美 亚洲 精品 少妇_日本按摩高潮A级中文字幕免费观看