iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
1
Modern Web

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

[十分鐘學習] reveal.js - 網頁?簡報?網站也可以二刀流

example1

只要遵循reveal.js的架構,網站也可以無痛變成漂亮簡報

GitHub Star: 38,000
Javascripting Overall: 91%
瀏覽器: ChromeFirefoxIE10+
RWD: 支援
License: MIT


《安裝》

  • CDN

      <!-- reveal.js v3.6.0 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script>
    

《範例》

  • 分頁效果

      <div class="reveal">
      	<div class="slides">
      		<section>
      			<!-- 第1頁內容 -->
      			Page 1
      		</section>
      		<section>
      			<!-- 第2頁內容 -->
      			Page 2
      		</section>
      	</div>
      </div>
      <script>
      	Reveal.initialize({
      		// 參數設定[註1]
      		controls: true, // 控制按鈕
      		controlsTutorial: true, // 引導初學者功能
      		controlsLayout: 'bottom-right', // 控制按鈕位置
      		controlsBackArrows: 'faded', // 返回按鈕顯示方式
      		progress: true, // 簡報進度條
      		slideNumber: false, // 簡報當前頁碼
      		history: false, // 所有動作儲存在歷史紀錄
      		keyboard: true, // 鍵盤快捷鍵
      		overview: true, // 簡報導覽模式
      		center: true, // 簡報垂直置中
      		touch: true, // 觸碰模式
      		loop: false, // 循環模式
      		rtl: false, // 簡報方向為RTL模式
      		shuffle: false, // 簡報顯示順序為隨機模式
      		autoPlayMedia: null, // 簡報內影音媒體為自動播放
      		autoSlide: 0, // 自動切換的秒數,0秒代表不自動
      		autoSlideStoppable: true, // 使用者在操作時停止自動切換
      		autoSlideMethod: Reveal.navigateNext, // 自動切換觸發的函式
      		mouseWheel: false, // 滑鼠滾輪可以切換簡報
      		transition: 'slide', // 轉場動畫
      		transitionSpeed: 'default', // 轉場速度
      		backgroundTransition: 'fade', // 簡報背景的轉場動畫
      		parallaxBackgroundImage: '', // 背景視差圖片
      		parallaxBackgroundSize: '', // 背景視差圖片尺寸(單位: 像素)
      		parallaxBackgroundHorizontal: null, // 水平背景視差,0為停止視差,null為自動計算(單位: 像素)
      		parallaxBackgroundVertical: null // 垂直背景視差,0為停止視差,null為自動計算(單位: 像素)
      	});
      </script>
    

    [註1]

    參數 描述 選項
    controls 控制按鈕
    controlsTutorial 引導初學者功能
    controlsLayout 控制按鈕位置 edgebootom-right
    controlsBackArrows 返回按鈕顯示方式 fadedhiddenvisible
    progress 簡報進度條
    slideNumber 簡報當前頁碼
    history 所有動作儲存在歷史紀錄
    keyboard 鍵盤快捷鍵
    overview 簡報導覽模式
    center 簡報垂直置中
    touch 觸碰模式
    loop 循環模式
    rtl 簡報方向為RTL模式
    shuffle 簡報顯示順序為隨機模式
    autoPlayMedia 簡報內影音媒體為自動播放 null(當有設定data-autoplay屬性時,則會自動撥放)、truefalse)
    autoSlideStoppable 使用者在操作時停止自動切換
    autoSlideMethod 自動切換觸發的函式
    mouseWheel 滑鼠滾輪可以切換簡報
    transition 轉場動畫 nonefadeslideconvexconcavezoom)
    transitionSpeed 轉場速度 defaultfastslow)
    backgroundTransition 簡報背景的轉場動畫
    parallaxBackgroundImage 背景視差圖片
    parallaxBackgroundSize 背景視差圖片尺寸(單位: 像素)
    parallaxBackgroundHorizontal 水平背景視差,0為停止視差,null為自動計算(單位: 像素)
    parallaxBackgroundVertical 垂直背景視差,0為停止視差,null為自動計算(單位: 像素)

《延伸》

  1. reveal.js – The HTML Presentation Framework
  2. hakimel/reveal.js: The HTML Presentation Framework

上一篇
[十分鐘學習] PDF.js - HTML5 X PDF 聯名
下一篇
[十分鐘學習] Intro.js - 網站導覽
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言