How to Create a Slide Transition Between “Pages” with HTML, CSS, and JavaScript

In this tutorial, you’re going to learn how to slide between pages. By the word “pages”, I don’t mean we’re going to slide from, say, index.html over to about.html. That’s not possible as far as I’m aware of. What I mean by slide between pages is making the entire window width and height slide from left to right and right to left, sort of like an image carousel. Unlike an image carousel, though, our pages can contain anything we want, for example, buttons, text, images, etc. Check it out below:

For this tutorial, we’re going to create four pages but feel free to add more.

HTML

Let’s create sort of like a hierarchy of divs with the following class names: container, pages, and page. Setting it up this way allows us to customize the width and height of our container to the entire screen size or something else, more on this later. The pages class will simply hold each individual page. Here is the basic concept:

<div class="container">
  <div class="pages">
    <div class="page…