1. <form id="pbesx"></form>
    <var id="pbesx"></var>
    1. <form id="pbesx"></form>

      <nav id="pbesx"></nav>

          1. <nobr id="pbesx"></nobr>

              在線客服

              電話①:189 6508 9135(張先生)
              電話②:134 0599 8886(何小姐)
              電話③:0591-83489135

              技術文章


              網站頁面滾動時添加動畫效果CSS和WOW.JS


              通過 WOW.js ,可以在向下滾動的過程中逐漸釋放這些動畫效果。

              Animate動畫效果演示網址:http://www.rvrentalsdirect.com/t/animate/

              下載WOW.js+Animate.css【本站下載

              默認情況下,當你向下滾動頁面時,可以逐漸展示出 CSS 動畫。它一般使用 animate.css 的動畫效果。但是,您可以輕松設置成您喜歡的動畫庫。

              優點:比其他 JavaScript 視覺插件更輕量級,像 Scrollorama (這個太重了,其實我們的需求都是非常簡單的)超簡單的安裝,與animate.css配合,只需幾行代碼即可。

              網站頁面滾動時添加動畫效果CSS和WOW.JS

              設置WOW.js

              1、鏈接到CSS動畫庫

              鏈接到 Animate.css(可以通過更改WOW.js設置鏈接到另一個CSS動畫庫)

              <link rel="stylesheet" href="css/animate.css">

              2、鏈接并激活WOW.js

              <script src="js/wow.min.js"></script>
              <script>
              new WOW().init();
              </script>

              顯示CSS動畫

              1、使元素易于顯示

              將CSS類.wow添加到HTML元素:在用戶滾動顯示它之前,它將不可見。
              (您可以在WOW設置中更改此CSS類,以避免名稱沖突。)

              <div class="wow">
              Content to Reveal Here
              </div>

              2、選擇動畫樣式

              在Animate.css中選擇一種動畫樣式 ,然后將CSS類添加到HTML元素中

              <div class="wow bounceInUp">
              Content to Reveal Here
              </div>

              你完成了!

              現在,當用戶滾動時,您的動畫將顯示出來。

              高級選項

              data-wow-duration:更改動畫的持續時間
              data-wow-delay:動畫開始之前的延遲
              data-wow-offset:啟動動畫的距離(與瀏覽器底部有關)
              data-wow-iteration:動畫的次數重復

              <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
              </section>
              <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">
              </section>

              自定義設置

              boxClass:類名,在用戶滾動時顯示隱藏的框。

              animateClass:觸發CSS動畫的類名稱(animate.css庫默認為“ animated”)

              offset:定義瀏覽器視口底部與隱藏框頂部之間的距離。
              當用戶滾動并到達此距離時,隱藏的框會顯示出來。

              mobile:在移動設備上打開/關閉WOW.js。

              live:在頁面上同時檢查新的WOW元素。

              wow = new WOW(
              {
              boxClass:     'wow',      // default
              animateClass: 'animated', // default
              offset:       0,          // default
              mobile:       true,       // default
              live:         true        // default
              }
              )
              wow.init();



              相關文章

              首頁  電話  在線咨詢  頂部
              被强很享受的床戏,我与丰满少妇高潮了播放,欧美一级纯片免费观看
              1. <form id="pbesx"></form>
                <var id="pbesx"></var>
                1. <form id="pbesx"></form>

                  <nav id="pbesx"></nav>

                      1. <nobr id="pbesx"></nobr>