極簡，桌上型、行動裝置都可運行的卷軸動畫

GitHub Star: 14,000
Javascripting Overall: 81%
瀏覽器: Chrome、Firefox和IE10+
RWD: 支援
License: MIT

《安裝》

• CDN

    <!-- ScrollReveal v3.3.6 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/3.3.6/scrollreveal.min.js"></script>
  

• npm

    $ npm install scrollreveal
  

• Bower

    $ bower install scrollreveal
  

《範例》

• 動態顯示內容

    <style>
    	.grid {
    		/* 排版用，不影響功能*/
    		height: 300px;
    		margin: 50px;
    		background: #ccc;
    		font-size: 50px;
    		line-height: 300px;
    		text-align: center;
    	}
    </style>
    <div class="grid">1</div>
    <div class="grid">2</div>
    <div class="grid">3</div>
    <div class="grid">4</div>
    <script>
    	window.sr = ScrollReveal({ 
    		// 參數設定[註1]
    		origin: "bottom",  // 起始位置
    		distance: "20px",  // 距離
    		duration: 500,  // 動畫時間
    		delay: 0,  // 動畫延遲時間
    		rotate: { x: 0, y: 0, z: 0 },  // 旋轉角度
    		opacity: 0,  // 透明度
    		scale: 0.9, // 縮放比例
    		easing: "cubic-bezier(0.6, 0.2, 0.1, 1)", // 動畫速度曲線
    		container: window.document.documentElement, // 外層
    		mobile: true, // 支援行動裝置
    		reset: true, // 每次都啟動動畫
    		useDelay: "always", // 延遲動畫次數
    		viewFactor: 0.2, // 當該物件在可視範圍內，則顯示此物件(0.2表示可視範圍20%)
    		viewOffset: { top: 0, right: 0, bottom: 0, left: 0 }, // 當外層有設定間隔造成偏移，則請設定在此維持精準度
    		beforeReveal: function (domEl) { console.log(1) }, // 當啟動顯示前，則執行此函式
    		beforeReset: function (domEl) {console.log(2) }, // 當重啟前，則執行此函式
    		afterReveal: function (domEl) {console.log(3) }, // 當啟動後，則執行此函式
    		afterReset: function (domEl) {console.log(4) } // 當重啟後，則執行此函式
    	});
    	sr.reveal( ".grid", {
    		// 參數設定[註1]
    	});
    </script>
  

  [註1]

  參數	描述

  origin|起始位置
  distance|距離
  duration|動畫時間
  delay|動畫延遲時間
  rotate|旋轉角度
  opacity|透明度
  scale|縮放比例
  easing|動畫速度曲線
  container|外層
  mobile|支援行動裝置
  reset|每次都啟動動畫
  useDelay|延遲動畫次數
  viewFactor|當該物件在可視範圍內，則顯示此物件(0.2表示可視範圍20%)
  viewOffset|當外層有設定間隔造成偏移，則請設定在此維持精準度
  beforeReveal()|當啟動前，則執行此函式
  beforeReset()|當重啟前，則執行此函式
  afterReveal()|當啟動後，則執行此函式
  afterReset()|當重啟後，則執行此函式

《延伸》

1. ScrollReveal
2. jlmakes/scrollreveal: Easy scroll animations for web and mobile browsers.