How to Create a Kaleidoscope Flip Card Pagination

Paginators are essential in user interfaces. But why settle for standard designs when you can infuse creativity inspired by a kaleidoscope, turning a mundane task into a delightful user experience?

HTML Structure

The HTML forms the backbone of our component, setting up a structure for the pagination.

<div class="pagination-container">
  <nav class="kaleidoscope-pagination" aria-label="Kaleidoscope Pagination">
    <ul class="pagination-list">
      <li><button class="pagination-button" aria-label="Previous Page" onclick="previousPage()">◀</button></li>
      <li><button class="pagination-button active" aria-label="Page 1" onclick="changePage(1)">1</button></li>
      <li><button class="pagination-button" aria-label="Page 2" onclick="changePage(2)">2</button></li>
      <li><button class="pagination-button" aria-label="Page 3" onclick="changePage(3)">3</button></li>
      <li><button class="pagination-button" aria-label="Next Page" onclick="nextPage()">▶</button></li>
    </ul>
  </nav>
</div>

JavaScript Logic

JavaScript empowers our pagination with interactivity, allowing users to switch between pages seamlessly.

let currentPage = 1;
function changePage(page) {
  let buttons = document.querySelectorAll('.pagination-button');
  buttons.forEach(button => button.classList.remove('active'));
  document.querySelector(`[aria-label='Page ${page}']`).classList.add('active');
  triggerFlipAnimation();
  currentPage = page;
}
function previousPage() {
  if (currentPage > 1) changePage(currentPage - 1);
}
function nextPage() {
  if (currentPage < document.querySelectorAll('.pagination-button').length - 2) changePage(currentPage + 1);
}
function triggerFlipAnimation() {
  let activeButton = document.querySelector('.pagination-button.active');
  activeButton.classList.add('flipping');
  setTimeout(() => activeButton.classList.remove('flipping'), 600);
}

CSS Styling

Our CSS encapsulates the shimmering effect, providing each button with a visually intriguing style.

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.kaleidoscope-pagination {
  display: flex;
}
.pagination-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
}
.pagination-button {
  border: none;
  padding: 10px 20px;
  background: rgba(255,255,255,0.8);
  border-radius: 5px;
  font-weight: bold;
  transition: transform 0.6s ease-in-out;
  cursor: pointer;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}
.pagination-button.active {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
.pagination-button.flipping {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #ffecd2, #fcb69f);
}

This innovative design not only makes the component functional, allowing users to navigate through pages, but also introduces a playful behavior with CSS transitions and animations.

With accessibility in mind, we've ensured clear labels and applied visual cues for focused elements. Our approach exemplifies how functionality can beautifully intertwine with creativity, offering both an efficient and memorable user experience.