Introduction

If you've understood the Fade-out Fade-in effect from the previous chapter then you won't have a hard time at all in understanding some other variations of fading effects.

We'll start with the second effect in this list 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 since it involves 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!

Mechanism

First thing's first, the way this effect works is that the new slide is made visible at the back of the current one and then the current slide is faded out. In other words the current slide fades out revealing the new one. At any instance we are only fading out one slide 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.

Which property can we use to position the new slide at the back of the current one?
position
z-index
transform

Building the effect

Let's start with thinking on how we will be laying out our classes and how many of them.

Recalling from the mechanism above, we have to first make the new slide appear at the back. This can be done using z-index - the new slide will get a lower z-index as compared to the current one to get it stacked behind it.

If you don't know about the z-index property consider reading the CSS Stacking chapter.

Accordingly, following we create a class .back for this purpose.

.slides.back {
    z-index: 1;
    visibility: visible;
    -webkit-transition: none;
    transition: none;
}

z-index stacks it at the backside whereas visibility makes it visible.

Notice that lines 4-5 here serve to remove any transitioning from the .back slide. We don't want the .back slide i.e the new slide to be given any sort of effects, but instead appear instantly at the backside and consequently give it a none value for transition.

And with this the first part of the fade-out effect is done - now over to fading the current slide out.

To give the current slide a fade out effect, we will make a .fade-out class:

.slides.fade-out {
    z-index: 2;
    visibility: hidden;
    opacity: 0
}

The z-index value 2 here serves to stack the current slide on top of the new one. The other two properties take care of creating the fading out effect.

Note that the current slide is assigned this class and since the z-index number 2 is higher than the one for the class .back it will lead to a higher order of stacking for the current slide.

We've named the classes according to the purposes they serve, however you can choose any names you want.

Now if you notice, the z-index values for the .back and .fade-out classes will cause the slides to be positioned on top of the navigation buttons, consequently making the left-right arrows hidden. We can prevent this by simply giving these buttons a higher stacking index.

.slider-nav {
    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");
The code above is part of the navigateSlider() function, specifically the slide navigation part. We've just shown it to make things look simpler, however when you are coding this you shall add this code to the navigateSlider() function.

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

Fade-out Slider

However we aren't over yet! See if you can detect any bugs in the slider. Navigate back and forth and there will be one point where you will notice some wierdness.

From the intial position when we navigate to the right we get a fade-out effect with the next slide appearing without any sort of problems. However as we navigate forwards/backwards from this point we notice a slight blink between the transitions at some points.

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

Since transition is by default applied to all animatable properties, it turns out that z-index also gets transitioned. However it tends to be transitioned somewhat strangely as in the example above, and hence the solution is that we need to stop it from getting transitioned.
How can we exclude z-index from getting transitioned in our slides?
Use transition-property: opacity, visibility
Use transition-exclude: z-index
We will have to use JavaScript for this

The following code only applies transition to the visibility and opacity properties, excluding z-index:

.slides {
    -webkit-transition-property: visibility, opacity;
    transition-property: visibility, opacity
}

And this would fix the blinking problem.

Fixed Fade-out Slider