1. <p id="ijjhg"></p>
      <acronym id="ijjhg"></acronym>

    2. <p id="ijjhg"></p>
      <table id="ijjhg"><ruby id="ijjhg"><mark id="ijjhg"></mark></ruby></table>
      0712-2888027 189-8648-0214
      微信公眾號

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

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

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

      時間:2024-07-10來源:風信官網 點擊: 936次
      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以下看免费国产_中日韩人妻一级毛片