impress.js - 更改不同幻灯片的背景颜色

Question

我正在试用 impress.js，但我想知道是否有一种方法可以更改某些幻灯片正文的背景颜色。我希望我的前 3 张幻灯片与其余幻灯片有不同的背景。

Answer 1

你不必求助于 javascript 来改变背景颜色当特定幻灯片处于焦点时 body 标记。

对于您制作的每张幻灯片，impress.js 都要求您为幻灯片指定一个id；
impress.js 然后获取 id 并将其添加到 body 标签作为“即时构建”类名的一部分。

假设您有三张幻灯片:

<div id="impress">   
  <div id="first" class="step slide"  data-x="-1500" data-y="1200" data-transition-duration="2000">
    <p>First</p>
  </div>    
  <div id="second" class="step slide"  data-x="0" data-y="1200" data-transition-duration="2000">
    <p>Second</p>
  </div>    
  <div id="third" class="step slide"  data-x="1500" data-y="1200" data-transition-duration="3000">
    <p>Third</p>
  </div>
</div>

现在，如果您在现代浏览器中使用 DOM 检查器，你会看到 impress.js 改变了 body 上的一个 css 类在每张幻灯片变为“实时”时标记，为您提供这些类:

• .impress-on-first
• .impress-on-second
• .impress-on-third

...其中 impress-on- 是开头，幻灯片 ID 是类名的结尾。

使用 impress.js 给你的钩子(Hook)，你可以设置的 css 属性每张幻灯片的 body 标签。

/* add css3 transition properties for smooth transitions */
.impress-on-first {
    background-color: yellow;
    color: #000;
}

.impress-on-second {
    background-color: orange;
    color: #fff;
}

.impress-on-third {
    background-color: red;
    color: #fff;
}

示范
jsbin 中的工作演示:
https://jsbin.com/dotudelaco/1/edit?html,css,js,output