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.

mg1075 · Answer 1 · 2019-01-28T15:35:11.200

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

score 2 · Answer 2 · edited Oct 16 '13 at 12:25

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!

score 0 · Accepted Answer · answered Feb 16 '13 at 06:13

Unlike reveal.js perhaps,it is not possible,

You can use jimpress http://jmpressjs.github.com/jmpress.js/#/home

here is a demo in which background changes

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

customize it as per your requirements so as to remove the slide structure

score 0 · Answer 4 · answered Sep 29 '15 at 07:53

Please check this example http://franciscomurillo.com/fio/#/credits you need to get the active step from the events, and change the background by yourself like this:

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

Then I have this css code in style.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;

}

and finally the div element in your index.html

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

This is not only useful for color but for any background you want. I hope this helps!

Cheers!

Change background color for different slides

4 Answers4