impress.js - 更改不同幻灯片的背景颜色

Question

我正在尝试 impress.js，但我想知道是否有办法更改某些幻灯片的主体背景颜色。我希望我的前 3 张幻灯片的背景与其他幻灯片不同。

Answer 1

body当特定幻灯片处于焦点时，您不必求助于 javascript 来更改标签的背景颜色。

对于您制作的每张幻灯片，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 提供的这个钩子，您可以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

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还没有公开下一张幻灯片。

如果您是修改 impress 核心的游戏，那么这个拉取请求是一个很好的起点！

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>

这不仅对颜色有用，而且对你想要的任何背景都有用。我希望这有帮助！

干杯!