<th id="yacog"></th>

    1. <thead id="yacog"><option id="yacog"></option></thead>
      <th id="yacog"></th>
      1. <code id="yacog"></code>
      2. animate.js下載實現頁面滾動時animate.css動畫特效

        發布時間:2019-02-28 18:49:19 來源:青鋒建站 作者:青鋒建站
          animate.css動畫庫,預設了抖動(shake)、閃爍(flash)、彈跳(bounce)、翻轉(flip)、旋轉(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多達 60 多種動畫效果。幾乎包含了所有常見的動畫效果,但在使用上與我們一般的實際項目有些出入,如果達到我們想要的效果需要添加JS代碼來配合實現。我們在網站建設上使用animate.css動畫庫的情況是:當鼠標滑過某一DIV時,內部相應的模塊執行動畫播放。為此青鋒建站專業開發了JS調用animate.css動畫庫的萬能調用代碼,使用非常方便,不需要JS開發能力也可以方便使用,但是只適用于鼠標滑過時,內部執行動畫。

        最新版本已經發布,提升了性能和兼容性,請下載最新版本,上次更新時間為2019-02-28,本次更新時間為2019-07-26,請關注后續更新。

        animate.css動畫庫萬能調用代碼介紹

          animate.css動畫庫萬能調用代碼可以實現當模塊滑過某一DIV或塊時,內部相應的設置有動畫類名的標簽執行動畫。只需要添加CSS類名,不需要JS開發。由青鋒建站前端開發團隊設計功能,免費開發給大家,只需要關注青鋒建站的百度百家號就可以免費獲取代碼。
        可以實現兩種效果
        A頁面加載完成,鼠標滑過執行動畫一次,默認下載完使用就是這種效果。
        B頁面加載完成,鼠標滑過執行動畫一次,鼠標離開,再次進行仍然可以執行,類似CSS偽類的效果,只需要把animate.js里的注釋部分去掉就可以。這種效果通過CSS偽類也可以實現。當然這里不做介紹。
        兼容性分析
        兼容性以下瀏覽器上的相應版本或以上版本:firfox 3.0/ie 9.0/chrome 4.0/safari 3.1/opera 9.5。
        animate.css動畫庫萬能調用代碼下載地址animate.js,下載碼獲取方式:
        關注青鋒建站微信公眾號,關注后-在文本輸入框中輸入:(animate.js)即可獲得下載碼。

        animate.css萬能調用代碼使用方法

          animate.css萬能調用代碼傅非常簡單,只需要給外層標簽添加類名(qingfengjianzhan),再給內部標簽添加(qf-動畫名稱)為名稱的CSS類名就可以。例如:以下示例代碼就可以實現相應的功能,當鼠標滑過<div class="qingfengjianzhan">時,里面的動畫就會觸發執行。
          <div class="qingfengjianzhan">
            <div class="qf-slideInLeft">
            </div>
            <div class="qf-slideInRight">
            </div>
          </div>
          
          !注意:默認下載的animate.js里已經將鼠標移出某個塊兒時onmouseout的注冊事件去掉,如果想鼠標進入執行動畫,鼠標離開后再次進入仍然執行動畫的效果,只需要把animate.js里的注釋部分去掉就可以。

        頁面滾動時實現animate.css動畫的其他方法

          使用wow.js可以實現同樣的功能,wow.js是專業的頁面滾動特效JS功能集合。而animate.js只是為了把問題簡單化,給初學者使用,在性能上由于使用了循環,性能上稍遜,最新版本已經改善這一情況。我們不求做得多好,只求最簡單的方法來實現這一功能。
          青鋒建站,提供專業的高品質網站制作服務,包括網站建設,SEO,網絡營銷,PHP開發,網站建設知名品牌,全國接單,專業做優化型網站,為企業構建營銷平臺。animate.js由青鋒建站團隊開發,復制,散發請注明來源。
        分享到:

        Copyright © 2016-2026 青鋒建站 版權所有

        亚洲国产欧美一区二区三区_性色a∨人人爽网站_爽到高潮嗷嗷嗷叫视频_色八区人妻在线视频