Day 16 : HackMD 簡報客製動畫設定

• 本篇分享讓您HackMD製作簡報更有彈性的動畫設定，包含依序出現的要點、圖片輪播功能，並且提醒您該注意的小細節。
• 今日簡報Day 16 : HackMD 簡報客製動畫設定-簡報，建議點選觀看簡報呈現的效果，公佈至今的全數簡報整理如文末連結。

順續出現的動畫

• 使用<!-- .element: class="fragment" data-fragment-index="1" -->語法，就可以指定該行文字撥放的順序為1，如果要改順序，在data-fragment-index="1"的數字處更改。
• 如果該行文字中間有空格，則視為中斷，會造成不如預期的出現效果，所以建議都要預覽檢視效果。
• 文字中間的空格包含有序清單1. 、無序清單- 的空格，取消空格的話MarkDown會視為同段文字，但排版就會改成置中非靠左對齊的排版，使用時須有取捨，另外，請以兩個空白鍵作為文字換行。

  ## 順續出現的動畫(有序清單)
  1. 第一點<!-- .element: class="fragment" data-fragment-index="1" -->
  2. 第二點<!-- .element: class="fragment" data-fragment-index="2" -->
  
  ## 順序出現的動畫(改為置中)
  1.第一點<!-- .element: class="fragment" data-fragment-index="1" -->  
  2.第二點<!-- .element: class="fragment" data-fragment-index="2" -->  
  

  

圖片輪播範例

• 參考Reveal.js 的 圖片layout範例，以下有3張貓咪圖片，配合圖片淡出fade-out效果，可以依序顯示圖片。

  <div class="r-stack">
    <img class="fragment fade-out" data-fragment-index="0" src="https://placekitten.com/450/300" width="450" height="300">
    <img class="fragment current-visible" data-fragment-index="0" src="https://placekitten.com/300/450" width="300" height="450">
    <img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
  </div>
  

  

介紹至今的技巧已經可以稱您為HackMD達人了，明天還有更酷炫的技巧唷。

提供今日簡報，以及至今已公開的所有簡報，供您一次瀏覽!