basicScroll

介紹

basicScroll是用來實現頁面滾動時特效的JavaScript庫，當頁面中元素相對於屏幕發生改變時，basicScroll通過改變元素css屬性值而實現特效。

優勢

  1. basicScroll具有靈活的動畫效果，開發者可以直接在CSS中使用變數來得到想要的動畫效果，也可以使用JS來更好的控制動畫.
  2. basicScroll是一個的輕量小型獨立的現代化框架。basicScroll高度優化，開發者可以使用它創造出優雅平滑的動畫。
  3. basicScroll的響應式做的也非常好，它可以在不改變代碼行的情況下從小屏幕到大屏幕切換。

安裝

可以通過Bower或者npm安裝basicscroll

bower install basicScroll 
npm install basicscroll

安裝完成後，在HTML文件中引用（根據文件的位置自行調整）

<script src="dist/basicScroll.min.js"></script>

實現一個簡單的特效

以圖片隨頁面下拉逐漸淡化為例

首先在HTML中載入一張圖片，假設將圖片的類設置為image

設置image類的css屬性：

      .image{
            opacity: var(--opacity);
            will-change: opacity;
      }

在JavaScript代碼中：

/*
*創建一個實例
*/
const instance = basicScroll.create({
      /*
       *取類為image的元素為目標
       */
      elem: document.querySelector('.image'),
      /*
       *設置觸發效果的位置
       */
      from: 'top-bottom',
      to: 'top-top',
      /*
       *設置效果
       */
      props: {
            '--opacity': {
                  from: .01,
                  to: .99
            }
      }
})

/*
 *啟用創建的實例        
 */
instance.start()

效果演示

實例API

basicScroll還有許多實例API，比如：

開始

開始動畫實例。basicScroll將跟蹤滾動位置並相應地調整實例。僅當滾動位置改變時才會執行更新。

instance.start()

停止

停止動畫實例。實例的所有效果將保持其最後的值。

instance.stop()

更新

觸發實例的更新，即使實例當前已停止。

const props = instance.update()

……(更多API可以在GitHub文檔中查閱)

CSS的力量

basicScroll中有很多用CSS變數控制的動畫，作者認為CSS變數的力量是不應該被低估的。CSS自定義屬性 - 如規範命名 - 可以比SASS變數做更多的事情。它們是屬性，它們像普通屬性一樣級聯。

使用CSS變數，可以消除多餘的樣式。開發者從編程語言的函數中了解得原理適用於CSS自定義屬性，定義一次，可以重複使用，無需重複編寫相同的代碼。

（參考文章《CSS變數的力量》）

進入官網了解更多basicScroll：https://basicscroll.electerious.com/