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

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> 

这不仅是颜色，但你想要的任何背景有用。 我希望这有助于！

干杯！