更改不同幻灯片的背景颜色

Question

我正在尝试impress.js但我想我有办法改变一些幻灯片的身体背景颜色.我想我的前3张幻灯片有不同的背景,其余的.

Answer 1

body当特定幻灯片处于焦点时,您不必使用javascript来更改标记的背景颜色.

对于您制作的每张幻灯片,impress.js都要求您提供幻灯片id;
然后impress.js接受id并将其添加到body标记中,作为"on up the fly"类名称的一部分.

假设您有三张幻灯片:

<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给你,你可以body为每张幻灯片设置标签的css属性.

/* 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