Slider Effects — Fade Out

If you've understood the Fade-out Fade-in effect from the previous chapter, then you won't have a hard time in understanding other variations of fade effects in our slider.

In this chapter, we'll start with the second effect which is fade out.

Although by the name it might seem fairly easy to accomplish, the fade out effect, in practice, is way more complicated than fade-out-fade-in, involving concepts such as stacking slides, preventing some properties from transitioning and much more on this road.

So let's get into the real work once again!

First thing's first, let's see exactly how this effect works:

At any given instance, we are only fading out one slide, and that is the current one.

Now before proceeding any further take sometime to think on how can you get this effect accomplished. Answer the questions that follow and see if you are in good form to start building this effect all on your own!

Try your best and if you fail then continue reading below.

As before, let's start by reviewing .slider_slide's styles to see what we ought to add to and remove from the classes that we create in this section for our fade out effect.

.slider_slide {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #ddd;
    font-size: 2.5em;
    text-align: center;

    /* styles of our concern */
    visibility: hidden;
}

The most relevant style here is the last declaration visibility: hidden. We'll be redefining this while building our effect.

Anyways, following from the way this effect works, the first thing we'll do is create a class that represents the new slide. The new slide (which is to be ultimately displayed) needs to be positioned at the back of the current slide.

We'll give the class 'slider_slide--back' to the new slide, clearly indicating that it goes at the backside.

Talking about how to position the new slide at the back, this can be easily done using z-index — the new slide gets a lower z-index while the current slide gets a higher z-index. As a result, the new slide gets stacked behind the current slide.

Apart from this, the new slide has to be visible from the very beginning — there is no need to transitionally bring it in view. This means that our .slider_slide--back class needs no transition declaration. It just needs visibility: visible

Below shown is the CSS for .slider_slide--back:

.slider_slide--back {
    z-index: 1;
    visibility: visible;
}

We chooose a z-index of 1 for the new slide. For the current one, we'll use the next larger value i.e 2.

And with this, the first part of the fade-out effect is done. Time to move over to dealing with the current slide.

The current slide needs to be faded out, transitionally. This means that it needs to have the declarations visibility: hidden and opacity: 0 set, in addition to the transition property to smoothly change these properties.

Moreover, as we saw above, it needs to be positioned above the new slide using the declaration z-index: 2.

The name we'll make for the current slide's class is 'slider_slide--faded', clearly indicating that this slide has been (or has to be) faded out.

Altogether, we get the following code:

.slider_slide--faded {
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s linear;
}

Restating it, z-index: 2 here serves to stack the current slide on top of the new one. The other three properties take care of giving the fading out effect.

Now if you notice, the z-index values for the .slider_slide--back and .slider_slide--faded elements cause the slides to be positioned on top of the navigation buttons and the pagination, hiding them.

We can prevent this by simply giving these hidden elements a higher stacking index:

.slider_nav {
    /* ... */
    z-index: 3;
}
.slider_pagination {
    /* ... */
    z-index: 3;
}

Now over to the scripting part. It is pretty similar to the one from the last section of the previous chapter.

slides[prevCounter].classList.remove("back");
slides[prevCounter].classList.add("fade-out");

slides[counter].classList.remove("fade-out");
slides[counter].classList.add("back");

And now let's try out the effect in real.

Fade-out Slider

Did you notice some wierdness while navigating back and forth in the slider above? Did you notice any blinking?

Our next job is to resolve the issues with this slider...

From the initial configuration of the slider as the page loads, when we navigate to the right, we get a wierd blinking transition.

This blink is caused by z-index in conjunction with the transition property.

Here's what's happening:

Let's see whether you can figure out how to exclude z-index from getting transitioned.

The declaration shown in the quiz snippet above needs to go in the .slider_slide--faded element's styleset.

The reason is very simple — it's the only class that is transitioned i.e has the transition property on it. The other class — .slider_slide--back — has no sort of transitioning applied and therefore doesn't need any z-index exclusions.

The following code excludes z-index from being transitioned in the .slider_slide--faded element:

.slider_slide--faded {
    /* ... */
    transition-property: visibility, opacity
}

And this would fix the blinking problem.

Fixed Fade-out Slider