Make a pager object

This script can be used to switch between pages in a document. Just give your pages the class "page" and it will work.

by hambern

HTML

<section class="page">
  <h2>Page 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi optio veniam velit voluptate molestias eaque accusantium quas. Rem quos et quis sequi reiciendis hic mollitia, fugit illo nemo facere libero.</p>
</section>

<section class="page">
  <h2>Page 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti id eos aliquam maiores magni quo nobis autem error a ipsam harum delectus dolorem vel dolore, possimus provident, libero veniam qui!</p>
</section>

<section class="page">
  <h2>Page 3</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni dolorum, voluptatum labore impedit quisquam amet eligendi est. Odit, quis, deserunt incidunt distinctio labore, beatae nemo architecto harum inventore perspiciatis maxime!</p>
</section>

<section class="page">
  <h2>Page 4</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit similique sed, debitis rerum, ab, quos ea voluptates assumenda dolorum pariatur veritatis placeat! Tenetur voluptas libero ex! Recusandae, et, qui.</p>
</section>

<button type="button" onclick="paginator.previous()">Previous page</button>
<button type="button" onclick="paginator.next()">Next page</button>

CSS

.page {
  display: none;
  animation-duration: 0.7s;
  animation-name: flipInX;
  background: lightgray;
  padding: 2em;
  border: 1px solid gray;
  border-radius: 1em;
  margin-bottom: 1em;
}

@keyframes flipInX {
   0% { transform: perspective(20em) rotateX(90deg); opacity: 0; }
   33% { transform: perspective(20em) rotateX(-6deg); }
   66% { transform: perspective(20em) rotateX(3deg); }
   100% { transform: perspective(20em) rotateX(0deg); opacity: 1; }
}

JavaScript

const paginator = {
  page: 1,
  next: function() {
    this.show(this.page + 1);
  },
  previous: function() {
    this.show(this.page - 1);
  },
  show: function(page) {
    let show = document.querySelector('.page:nth-of-type(' + page + ')');
    if (show) {
      this.page = page;
      let pages = document.querySelectorAll('.page');
      pages.forEach(p => p.style.display = 'none');
      show.style.display = 'block';
    }
  },
}

paginator.show(1); // Shows first page