Introduction

So uptil this point in our effects unit we have effectively covered some fading and sliding effects in general and are now in good form to play a little bit with both of them.

In this chapter we will be considering an effect essentially combining fade-out together with sliding - known as fade-out slide-in.

How the effect works

As always, we'll start with unraveling how does this fade-out-slide-in effect work:

The current slide is faded out and at the same time the new slide is slided in from the right.

Hence the name — 'fade out slide in'.

With the effect's working known, let's address some questions...

Which of the following properties would we need to use for the fade-out part of this effect?

  • opacity and visibility
  • opacity only
  • visibility only

Will we need to consider z-index in this effect?

(Think of the stacking of the current and the new slide just like in the fade-out effect chapter.)

  • Yes
  • No

What options do we have to slide in the new slide from the right?

  • Use transform
  • Use left
  • Use margin-left
  • All of the above are potential options

Which of the following will show the best performance as compared to the others in giving a slide effect?

  • transform
  • left
  • margin-left

So how did you perform in this short test. If you aced it then you are pretty good to take this effect's code all on your own!

Anyways let's start with building the effect from the basics.

Building the effect

Here's the configuration of the .slider_slide class so that we know what ought to be changed while building our 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 first thing we'll do, after reviewing how the fade-out-slide-in effect works, is to deal with the current slide.

The current slide ought to be faded out, and this could be conveniently done using our old .slider_slide--faded class constructed in the previous chapter.

However, we'll need to change one thing — the z-index property. Previously, it was equal to 2, since the current slide was stacked on top of the new one; however, now the current slide has to be stacked below the new one. We'll change its value from 2 to 1.

Shown below is the redefined version of the class .slider_slide--faded:

.slider_slides--faded {
    opacity: 0; 
    visibility: hidden;
    transition: 1s linear;
    transition-property: visibility, opacity

    /* z-index has been changed */
    z-index: 1;
}

And with this, we are done dealing with the current slide. Over to the new one...

The new slide has to be slided in from the right side. Although this might seem intimidating, it's actually really simple to do, given that you have firm foundations on CSS transitions and animations.

There are essentially two ways to slide in the new slide: one is using CSS transitions while the other is using CSS animations.

Here are the steps we would need to follow if we were to use CSS transitions:

  1. Give the new slide a class such that it gets positioned on the right side of the slider, out of view. This can be done using the style transform: translateX(100%).
  2. Then set a timeout for 0s, after which we can successfully run a transition over this new slide and get it slided in.

And here are the steps we would need in the case of CSS animations:

  1. Give the new slide a class such that it gets positioned on the right side of the slider, out of view, and then comes into view via an animation.

We would leave it to you to decide which one seems easier than the other. Which one requires us to do little work in terms of JavaScript.

Verily, it's using CSS animations!

Going with transitions, we would need to set up an additional timer logic in our JavaScript code. However, going with animations, we would need nothing extra — just the same old class add/remove logic.

Anyways, let's get to construct the class for the new slide.

We'll call this class 'slider_slide--slided', clearly indicating that the respective slide has been slided in.

Shown below are the styles we ought to apply on the new slide, using the class .slider_slide--slided:

  1. It needs to be shown, which implies the declaration visibility: visible.
  2. It needs to be above the current slide, which implies the usage of z-index.
  3. It needs to come in from the right side, using animation.

Recall that we gave the current slide a z-index value of 1, in order to stack it behind the new one. This means that we can give a z-index of 2 to our new slide.

Summing all these things up, we get to the following definition for .slider_slide--slided:

.slider_slide--slided {
    animation: slideIn 1s ease-in-out 1 both;
    visibility: visible;
    z-index: 2;
}

The animation is of the name slideIn with a duration of 1s (you can choose whatever you want), timing function of ease-in-out and a single iteration. The iteration count is 1 since we only need to slide in the new slide once — not repeatedly.

Most importantly, the both parameter serves to keep our slide in place once the animation ends.

By default, when an animation completes, all the styles changed by it are reset to their original values. In our case, if we omitted the both parameter above, our slide would've slided in and then snapped back out of view — clearly not what we want!

Let's now define the animation slideIn:

@keyframes slideIn {
    from {transform: translateX(100%)}
    to {transform: translateX(0%)}
}

transform: translateX(100%) initially throws the new slide to the right side and then transform: translateX(0%) brings it into place.

Adding interactivity

So now that we've layed out the CSS classes perfectly for the fade-out-slide-in effect, we can move on to implement it in our slider's script.

The implementation is very easy — use the same class toggles as in the previous chapters.

The current slide gets the class .slider_slide--faded and the new slide gets the class .slider_slide--slided:

function navigateSlider() {
   /* ... */
   slides[currentIndex].classList.remove("slider_slide--slided");
   slides[currentIndex].classList.add("slider_slide--faded");

   slides[newIndex].classList.remove("slider_slide--faded");
   slides[newIndex].classList.add("slider_slide--slided");
   /* ... */
}

Time to see what have we accomplished so far.

Fade out Slide in Effect

Flawless!