Back

Introducing a Celestial Constellation Pagination System

Discover the art of transforming paginations with a celestial twist; guiding users through pages like a cosmic journey across constellations.

Component Explanation

HTML

Our HTML structure defines a navigation element that acts as a holder for our starry pagination. Each button represents a star or a page in our pagination system.

        <nav class="starry-pagination" aria-label="Pagination Navigation">
          <ul class="pagination-stars">
            <li><button aria-label="Previous Page" onclick="previousStar()">❮</button></li>
            <li><button aria-label="Page 1" class="current-star" onclick="visitStar(1)">★</button></li>
            <li><button aria-label="Page 2" onclick="visitStar(2)">★</button></li>
            <li><button aria-label="Page 3" onclick="visitStar(3)">★</button></li>
            <li><button aria-label="Page 4" onclick="visitStar(4)">★</button></li>
            <li><button aria-label="Next Page" onclick="nextStar()">❯</button></li>
          </ul>
        </nav>

JavaScript

This JavaScript logic handles the transition between the pages or stars, maintaining the current page state and highlighting the active page with a visual cue.

        let currentPage = 1;
        const totalStars = 4;
        
        function visitStar(page) {
          currentPage = page;
          updateStars();
        }
        
        function previousStar() {
          if (currentPage > 1) {
            currentPage--;
            updateStars();
          }
        }
        
        function nextStar() {
          if (currentPage < totalStars) {
            currentPage++;
            updateStars();
          }
        }
        
        function updateStars() {
          let stars = document.querySelectorAll('.pagination-stars button');
          stars.forEach((star, index) => {
            if (index === currentPage) {
              star.classList.add('current-star');
            } else {
              star.classList.remove('current-star');
            }
          });
        }

CSS

Our CSS adopts a glassmorphic design style to give our pagination a celestial, ethereal quality. Each star (or page) uses CSS for interactivity and visual feedback.

        .starry-pagination {
          display: flex;
          justify-content: center;
          padding: 20px;
          background: rgba(255, 255, 255, 0.25);
          border-radius: 10px;
          backdrop-filter: blur(10px);
        }

        .pagination-stars {
          list-style: none;
          padding: 0;
          display: flex;
          gap: 10px;
        }

        .pagination-stars button {
          background: none;
          border: none;
          color: #fff;
          font-size: 24px;
          cursor: pointer;
          transition: transform 0.3s ease-in-out;
        }

        .current-star {
          transform: scale(1.5);
          color: #FFD700;
        }

        .pagination-stars button:focus {
          outline: 2px dashed #FFD700;
        }

        @media (prefers-reduced-motion: reduce) {
          .pagination-stars button {
            transition: none;
          }
        }

By integrating visual trends like glassmorphism and ensuring accessibility compliance, this celestial-themed pagination enriches the user experience with creativity and play.

Whole code

<nav class="starry-pagination" aria-label="Pagination Navigation">
  <ul class="pagination-stars">
    <li><button aria-label="Previous Page" onclick="previousStar()">&#10094;</button></li>
    <li><button aria-label="Page 1" class="current-star" onclick="visitStar(1)">&#9733;</button></li>
    <li><button aria-label="Page 2" onclick="visitStar(2)">&#9733;</button></li>
    <li><button aria-label="Page 3" onclick="visitStar(3)">&#9733;</button></li>
    <li><button aria-label="Page 4" onclick="visitStar(4)">&#9733;</button></li>
    <li><button aria-label="Next Page" onclick="nextStar()">&#10095;</button></li>
  </ul>
</nav>


<script>
let currentPage = 1;
const totalStars = 4;

function visitStar(page) {
  currentPage = page;
  updateStars();
}

function previousStar() {
  if (currentPage > 1) {
    currentPage--;
    updateStars();
  }
}

function nextStar() {
  if (currentPage < totalStars) {
    currentPage++;
    updateStars();
  }
}

function updateStars() {
  let stars = document.querySelectorAll('.pagination-stars button');
  stars.forEach((star, index) => {
    if (index === currentPage) {
      star.classList.add('current-star');
    } else {
      star.classList.remove('current-star');
    }
  });
}

</script>

<style>
.starry-pagination {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.pagination-stars {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
}

.pagination-stars button {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.current-star {
  transform: scale(1.5);
  color: #FFD700;
}

.pagination-stars button:focus {
  outline: 2px dashed #FFD700;
}

@media (prefers-reduced-motion: reduce) {
  .pagination-stars button {
    transition: none;
  }
}
</style>

Thank you for reading this article.

Introducing a Celestial Constellation Pagination System

Component Explanation

HTML

JavaScript

CSS

Whole code

Comments

More paginations

Similar

See also