How to Create a Slide Transition Between Separate “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 currently possible as far as I’m aware of. What I mean by slide between pages is basically 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, however, our pages can contain anything we want, for example, buttons, text, images, input fields, etc. Check it out below:

Slide between pages

For this tutorial, we’re going to create four pages but feel free to add or delete pages. Let’s get into the tutorial.

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 one">
      <h1>PAGE 1</h1>
      <div>
        <button onClick="slide('next')">Next</button>
      </div>
    <div>
    <div class="page two">
      <h1>PAGE 2</h1>
      <div>
        <button onClick="slide('prev')">Previous</button>
        <button onClick="slide('next')">Next</button>
      </div>
    </div>
    <div class="page three">
      <h1>PAGE 3</h1>
      <div>
        <button onClick="slide('prev')">Previous</button>
        <button onClick="slide('next')">Next</button>
      </div>
     </div>
     <div class="page four">
       <h1>PAGE 4</h1>
       <div>
         <button onClick="slide('prev')">Previous</button>
       </div>
    </div>    
  </div>
</div>

If you want to add a page just copy/paste one of the divs with a class name of “page x” and replace the x with the correct page number.

Moving along to our CSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
button {
padding: 8px;
width: 100px;
border: 2px solid white;
background-color: transparent;
color: white;
cursor: pointer;
border-radius: 5px;
transition: 0.3s ease-out;
}
button:hover {
transform: scale(1.05);
}
.container {
width: 100%;
height: 100vh;
overflow: hidden;
}
.pages {
display: flex;
width: 400%;
box-sizing: border-box;
}
.page {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
transition: all 0.7s;
color: white;
}
.one{
background: orangered;
}
.two{
background-color: dodgerblue;
}
.three{
background-color: indigo;
}
.four{
background-color: limegreen;
}

It’s important to note that each page has a width of 100%. Because we have four pages, we set the .pages selector width to 400%. So increase or decrease this by 100 for every page you add or delete. For instance, if you have four pages and decide to add one change the width to 500% and if you delete one lower it to 300%.

Alright, now let’s create the function that will either slide to the previous or next page. Here is the JavaScript code:

const pages = document.querySelectorAll(".page");
    const translateAmount = 100; 
    let translate = 0;
slide = (direction) => {
direction === "next" ? translate -= translateAmount : translate += translateAmount;
pages.forEach(
        pages => (pages.style.transform = `translateX(${translate}%)`)
      );
    }

The trick to making the sliding effect work is in the CSS property of transform: translateX(translate). Remember, our .pages selector has a width of 400%. Page 1 is between 0% and 100%, so in order to slide to page 2, which is between 100% and 200%, all we have to do is increase the translateX by 100. If we want to slide back one page then we decrease by 100.

Okay, that’s great but what if we want to slide from top to bottom and bottom to top? In the CSS file, delete ‘display: flex’ and ‘width:400%’ from the ‘.pages’ selector. Also switch ‘translateX’ to ‘translateY’ in the JavaScript file. This is the result:

Left/right:

Top/bottom:

Not making sense? Check out my tutorial below for a more in depth explanation.