更改不同幻燈片的背景顏色

Question

我正在嘗試impress.js，但我不知道是否有一種方法可以更改某些幻燈片的背景顏色。我希望我的前3張幻燈片與其他背景有不同的背景。

Answer 1

不像reveal.js也許，這是不可能的，

您可以使用jimpress http://jmpressjs.github.com/jmpress.js/#/home

這裏是在後臺更改

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

定製按演示您的的要求，以去除滑動結構

Answer 2

我有一個稍微不同的方法..如果你不怕一點點jquery！使用jQuery插件的顏色 - （https://github.com/jquery/jquery-color），你可以做到以下幾點：

// keep a list of slide ids and desired background colours 
var bgs = { 
    "main": "#FFF", 
    "other": "#000" 
}; 

// use the 'stepenter' event (step leave is better but requires 
//a modification to impress, more on this below) 
$(document).ready(function() { 
    $(document).on('impress:stepenter', function(e) { 
     var slide = $(e.target).attr("id"); 

     // the jquery-colour plugin allows animating background colours here 
     $("body").animate({ 
      backgroundColor: bgs[slide] 
     }, 500); 
    }); 
}); 

在評論中，我提到stepleave一個更好的解決方案，因爲它可以作爲你的幻燈片之間切換過渡的背景顏色。但是stepleave還沒有公開nextSlide。

如果你是遊戲修改印記核心，那麼這個pull request是一個很好的開始！

Answer 3

當特定的幻燈片焦點對準時，您不必訴諸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

...其中沒話說-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這裏工作演示：
http://jsbin.com/uWUVufO/1/

Answer 4

請檢查這個例子http://franciscomurillo.com/fio/#/credits，你需要從事件的積極一步，並自行更改背景是這樣的：

<script> 
var api = impress(); 
api.init(); 

//Here you can show any background for current slide/step. 
window.addEventListener('impress:stepenter', function(event) { 
    console.log("::: " + event.target.id); 

    if (event.target.id == "credits") { 
     console.log("In credits step"); 
     $("#mc_wallpaper").removeClass("fade-out"); 
     $("#mc_wallpaper").addClass("fade-in"); 

    } 



}, false); 


//Here you can hide any background you showed for current slide/step. 
window.addEventListener('impress:stepleave', function(event) { 
    console.log("impress:stepleave "); 
    if (event.target.id == "credits") { 
     console.log("Out of :: credits"); 
     $("#mc_wallpaper").addClass("fade-out"); 
     $("#mc_wallpaper").removeClass("fade-in"); 

    } 
}, false); 

</script> 

然後我在style.css中有這樣的css代碼：

/* make keyframes that tell the start state and the end state of our object */ 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 

.fade-in { 
    opacity:0; /* make things invisible upon start */ 
    -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ 
    -moz-animation:fadeIn ease-in 1; 
    animation:fadeIn ease-in 1; 

    -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    animation-duration:1s; 
} 


/* make keyframes that tell the start state and the end state of our object */ 
@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } } 
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } } 
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } } 

.fade-out { 
    opacity:0; /* make things invisible upon start */ 
    -webkit-animation:fadeOut ease-in 1; /* call our keyframe named fadeOut, use animattion ease-in and repeat it only 1 time */ 
    -moz-animation:fadeOut ease-in 1; 
    animation:fadeOut ease-in 1; 

    -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    animation-duration:1s; 
} 


#mc_wallpaper{ 
    width: 100%; 
    height: 100%; 
    background: #fff url(../images/vUYioU8.jpg) no-repeat center center/cover; 
    opacity: 0; 

} 

最後的div元素在您的index.html

<div id="mc_wallpaper"> </div> 

這不僅是顏色，但你想要的任何背景有用。 我希望這有助於！

乾杯！