reveal.js(1) - Backgrounds

1. 投影片單獨設定背景色:

新增兩張投影片並透過 data-background-color 設定背景色:

<section data-background-color="#d1d1e0">
    <h2>🤖</h2>
</section>
<section data-background-color="#a3c2c2">
    <h2>🐨</h2>
</section>

2. 設定背景圖片:

新增投影片並透過 data-background-image 設定背景:

<section data-background-image="https://images.unsplash.com/photo-1626505699795-e716038f37e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1506&q=80">
    <h2>Image</h2>
</section>

3. 設定 IFrame 背景:

新增投影片並透過 data-background-iframe 設定IFrame:

<section data-background-iframe="https://www.youtube.com/embed/3_GFxZ9xA7o?list=RDrLEpCKcg0UU"
    data-background-interactive>
    <h2>Iframe</h2>
</section>

借用美秀集團的 "擋一根"，YouTube 有滿多影片不讓人內嵌。

4. 滾動式背景:

修改 initialize 的參數可以形成滾動特效:

Reveal.initialize({
    // 設定背景圖 
    parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',

    // 設定大小，大點才可以滾動
    parallaxBackgroundSize: '140% 140%',

    // 設定切換投影片時水平及垂直的偏移量               
    parallaxBackgroundHorizontal: 200,
    parallaxBackgroundVertical: 50
});