iT邦幫忙

2018 iT 邦幫忙鐵人賽
1
Modern Web

30天學習30套前端技術(2018年)系列 第 57

[十分鐘學習] ScrollReveal - 動態顯示內容

example1

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

GitHub Star: 14,000
Javascripting Overall: 81%
瀏覽器: ChromeFirefoxIE10+
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.

上一篇
[十分鐘學習] Tabulator - 表格內容強化工具
下一篇
[十分鐘學習] datedropper - 活潑風格日期選擇器
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言