Introduction
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!
How the effect works
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.
Which property can we use to position the new slide at the back of the current one?
position
z-index
transform
Do we need to apply transition
on the new slide, on the current slide, or on both of them?
- New slide
- Current slide
- Both of them
Building the effect
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");
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.
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...
A slight problem
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:
transition
is by default applied to all animatable properties, the z-index
property also gets transitioned in our slider.However,
z-index
is known to cause problems in CSS transitions/animations and should be excluded from the animation.Let's see whether you can figure out how to exclude z-index
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 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.