Using Javascript to fade background colour
May 20, 2021
Hi all
I've been playing with triggering JS to change the browser background colour. Opens up some really great possibilities for seamless players.
However, I would like to learn how to have JS on one slide to change the colour, then repeat the trigger on the next slide with a new colour.
Using the current method, the change between slides is very abrupt. Is there a way to get it to fade between the two colours?
PS here is a link to the Solid Colour tutorial I followed:
https://www.linkedin.com/pulse/try-out-3-types-fullscreen-backgrounds-storyline-milloway-msit#:~:text=Solid%20Colors-,Use%20the%20code%20below%20on%20an,document,-body.style.background
6 Replies
A few ways to get this done. First you could use a variable to hold the color. Then on loading/showing the new page you could change that variable with your new color and then it will change. However to create a smooth color transition you also need a way to make the page transition triggered smooth. Might be possible by using Storyline's page transitions. My curious mind is triggered now, so experimenting with it.
Hey Math! Thanks for replying!
That's pretty much the point I am at. I have a trigger to run JS when a slide starts, so I can get the colours I desire on each slide. But the fade is holding me back.
The in-built transition works fine for everything contained within the slide but not for the background browser colour. Will reply here if I crack it....
A solution might be this.
Delay page jump...first change color of background of current page. Then go to the next page... and as the background color of that page is the 2nd color... it will look as if it was a smooth transition.
Try using this javascript.
document.body.style.transition = "background 2s";
document.body.style.background = "#0000ff";
Simple and nice effect.
whaaaa Russell you have nailed it! Perfect, thank you so much!
Simple if you know how! Really appreciate this, think being able to manipulate the background colour opens up so many possibilities when used with a frameless player. Cheers!