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

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

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

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

    時間:2024-03-27來源:風信官網 點擊: 805次
    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 ...
      })
    欄目列表
    推薦內容
    熱點內容
    展開
    动漫h精品无码一区二区三区,欧美日韩精品一区二区,午夜麻豆国产精品,加勒比中文字幕无码,亚洲日本va中文字幕区