2

impress.js を試していますが、一部のスライドの本文の背景色を変更する方法があるのだろうかと思います。最初の 3 つのスライドの背景を残りのスライドとは異なるものにしたいと考えています。

4

4 に答える 4

8

body特定のスライドにフォーカスがある場合、JavaScript を使用してタグの背景色を変更する必要はありません。

id作成するスライドごとに、impress.js はスライドに;を付ける必要があります。
次に impress.js は を受け取り、それを「オンザフライで構築された」クラス名の一部としてタグidに追加します。body

3 つのスライドがあるとします。

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

body 現在、最新のブラウザーで DOM インスペクターを使用すると、各スライドが「ライブ」になるとimpress.js がタグの css クラスの 1 つを変更し、これらのクラスを操作できるようになります。

  • .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

于 2013-10-16T23:26:04.637 に答える
0

Reveal.js と違って、おそらく、それは不可能です。

jimpress http://jmpressjs.github.com/jmpress.js/#/homeを使用できます

これは背景が変わるデモです

http://tympanus.net/Tutorials/SlideshowJmpress/

スライド構造を削除するように、要件に従ってカスタマイズします

于 2013-02-16T06:13:44.357 に答える