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给你，你可以设置的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

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。

如果你是修改impress核心的游戏，那么这个pull request是一个很好的起点！

Answer 3

与reveal.js不同，也许不可能，

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

这是一个背景更改的演示

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

根据您的要求进行自定义，以便删除幻灯片结构

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;

}

最后是index.html中的div元素

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

这不仅适用于颜色，也适用于您想要的任何背景。我希望这有帮助！

干杯！

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

4 个答案: