Back

Innovative Rotating Book Pagination for Immersive Reading Interfaces

Explore how to create a unique book-inspired pagination system where each page turn feels just like flipping through a physical book.

HTML

The HTML structure for this innovative pagination system is quite straightforward. It consists of a main container <div> with the class 'book-pagination' that uses flexbox for layout management, a 'Previous' button, a page display area, and a 'Next' button.

        <div class="book-pagination">
          <button class="page-button" onclick="prevPage()">Previous</button>
          <div class="book-display">
            <div id="book-page" class="book-page"></div>
          </div>
          <button class="page-button" onclick="nextPage()">Next</button>
        </div>

JavaScript

The accompanying JavaScript is responsible for handling the page transitions. It uses a simple array to store the pages. The 'updatePage' function updates the content of the current page, while 'nextPage' and 'prevPage' manage the animation and the logic for navigating between pages.

        let currentPage = 0;
        const pages = ["Page 1", "Page 2", "Page 3", "Page 4", "Page 5"];
        function updatePage() {
          const bookPage = document.getElementById('book-page');
          bookPage.textContent = pages[currentPage];
          bookPage.style.transform = 'rotateY(0deg)';
        }
        function nextPage() {
          if (currentPage < pages.length - 1) {
            currentPage++;
            const bookPage = document.getElementById('book-page');
            bookPage.style.transform = 'rotateY(-180deg)';
            setTimeout(updatePage, 300);
          }
        }
        function prevPage() {
          if (currentPage > 0) {
            currentPage--;
            const bookPage = document.getElementById('book-page');
            bookPage.style.transform = 'rotateY(180deg)';
            setTimeout(updatePage, 300);
          }
        }
        document.addEventListener('DOMContentLoaded', updatePage);

CSS

The CSS is designed to create a polished and engaging visual experience. Our main container uses glassmorphism styling with a semi-transparent background, and the buttons include hover effects for user interaction. The book visualization incorporates 3D transformations to mimic a physical book's page flip effect.

        .book-pagination {
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 10px;
          padding: 20px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
        .page-button {
          background-color: #6200EE;
          color: #fff;
          border: none;
          padding: 10px 15px;
          margin: 0 10px;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }
        .page-button:hover {
          background-color: #3700B3;
        }
        .book-display {
          perspective: 1000px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .book-page {
          height: 150px;
          width: 100px;
          background-color: #fff;
          border-radius: 5px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          transition: transform 0.5s ease;
          transform-style: preserve-3d;
        }

By integrating the JavaScript functions with these CSS animations, the pages flip seamlessly with each button click, providing an engaging user experience that is both functional and fun.

Whole code

<div class="book-pagination">
  <button class="page-button" onclick="prevPage()">Previous</button>
  <div class="book-display">
    <div id="book-page" class="book-page"></div>
  </div>
  <button class="page-button" onclick="nextPage()">Next</button>
</div>


<script>
let currentPage = 0;
const pages = ["Page 1", "Page 2", "Page 3", "Page 4", "Page 5"];
function updatePage() {
  const bookPage = document.getElementById('book-page');
  bookPage.textContent = pages[currentPage];
  bookPage.style.transform = 'rotateY(0deg)';
}
function nextPage() {
  if (currentPage < pages.length - 1) {
    currentPage++;
    const bookPage = document.getElementById('book-page');
    bookPage.style.transform = 'rotateY(-180deg)';
    setTimeout(updatePage, 300);
  }
}
function prevPage() {
  if (currentPage > 0) {
    currentPage--;
    const bookPage = document.getElementById('book-page');
    bookPage.style.transform = 'rotateY(180deg)';
    setTimeout(updatePage, 300);
  }
}
document.addEventListener('DOMContentLoaded', updatePage)
</script>

<style>
.book-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.page-button {
  background-color: #6200EE;
  color: #fff;
  border: none;
  padding: 10px 15px;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.page-button:hover {
  background-color: #3700B3;
}
.book-display {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.book-page {
  height: 150px;
  width: 100px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

</style>

Innovative Rotating Book Pagination for Immersive Reading Interfaces

HTML

JavaScript

CSS

Whole code

Comments

More paginations

Similar

See also