Slider Revolution Background Color Delay

[madeby18]

This is my site: https://bradvogler.com

I have the beginning of what I’m trying to do set up here. My second book came out, and I’m trying to take passages from the text, have those appear on a white background, and then as the text fades out, have the background color change to black, so that other elements can appear.

If I set the background color to black in Slider Revolution, the options to adjust the background are grayed out. So, I thought that since the site background will be white, that I could make the slide background transparent, and then add an solid black image or shape in Slider Revolution to come in. This worked, except it wasn’t full screen, even when I selected stretch or cover in the layer options.

I even found some css here: https://www.themepunch.com/faq/extend-image-overlay/ but I’m not sure how to apply it to a specific layer that comes in on a delay, but it works to change the background color.

Is there another way to do this that you can think of?

Thanks for you help,
Brad

[ruenel]

Hello There,

Thanks for writing in!

You may apply the custom css using this:

.rev_slider .active-revslide  .slotholder:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
 
    /* black overlay with 50% transparency */
    background: rgba(0, 0, 0, 0.5);
}

A .active-revslide class selector was added to indicate the active slide.

Hope this helps.

[madeby18]

RueNel,

I don’t know that I explained this quite right. The code works, but I’m still unable to time when the background color would change from white to black.

Is it not possible to change the background color of the slide, or to add a full screen layer color that would come in after the text fades out?

Originally I thought to set up 4 slides with white background and text that would randomize, and always transition to slide 5 (for example) that would have the black background and book cover. I couldn’t figure out how to randomize only slides 1-4 while stopping on slide 5 no matter which of the slides 1-4 appeared first.

I thought timing the background color to change would be easier, but maybe it isn’t.

Thanks,
Brad

[rad]

Hi Brad,

Yes, it’s not possible. Applying CSS based on class is only as good as toggling it (easing effect may not work). And toggling the class name is done by javascript so it can’t be controlled by just CSS. It works but will feel like static switching over without easing.

And randomization will not work too since the slider creates a clone of each slide to create an illusion of infinite sliding.

Thanks!

[madeby18]

Rad,

Thanks. I’ll have to figure out something else.

Brad

[ruenel]

No problem.
If you need anything else we can help you with, don’t hesitate to open another thread.