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

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- 是开头，而您的 slide 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 );
    });
});

在 cmets 中，我提到 stepleave 是一个更好的解决方案，因为它可用于在幻灯片之间切换时转换背景颜色。但是stepleave 还没有公开下一张幻灯片。

如果你是修改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>

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

干杯！