Change background color for different slides

Question

I am trying impress.js out but I wonder i there is a way to change the background color of the body for some slides. I would like my first 3 slides to have a different background then the rest.

Answer 1

You do not have to resort to javascript to alter the background-color of the body tag when a particular slide is in focus.

For each slide you make, impress.js requires you to give the slide an id;
impress.js then takes the id and adds it to the body tag as part of a "built on the fly" class name.

So suppose you have three slides:

<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>

Now, if you use the DOM inspector in your modern browser, you will see impress.js alter one of the css classes on the body tag as each slide becomes "live", giving you these classes to work with:

• .impress-on-first
• .impress-on-second
• .impress-on-third

...where impress-on- is the beginning, and your slide id is the end of the class name.

Using this hook impress.js gives you, you can set the css properties of the body tag for each slide.

/* 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;
}

Demonstration
Working demo here in jsbin:
https://jsbin.com/dotudelaco/1/edit?html,css,js,output

Answer 2

I have a slightly different approach... if you aren't afraid of a bit of jquery! Using the jquery colour plugin - (https://github.com/jquery/jquery-color) you can do the following:

// 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 );
    });
});

In the comments, I mention stepleave as a better solution as it can be used to transition the background colour as you switch between slides. However stepleave doesn't expose the nextSlide yet.

If you are game to modify the impress core, then this pull request is a good place to start!