Celestial Navigation: Star-Shaped Pagination

HTML

In our starry pagination component, we first set up a container that holds forward and back navigation buttons on either side of three circular star indicators in the center. These elements are designed to mimic the experience of navigating through the stars. The navigation buttons are SVG icons shaped like arrows, representing the direction of movement.

        <div class="star-pagination">
          <button class="star-nav prev" onclick="navigate(-1)">
            <svg xmlns="http://www.w3.org/2000/svg" ... ></svg>
          </button>
          <div class="star-indicator">
            <div class="star-item"></div>
            <div class="star-item"></div>
            <div class="star-item"></div>
          </div>
          <button class="star-nav next" onclick="navigate(1)">
            <svg xmlns="http://www.w3.org/2000/svg" ... ></svg>
          </button>
        </div>
      

JavaScript

For the interactive navigation, we maintain an index state (currentIndex) to track the selected star item. A function named 'navigate' manages this state, adjusting index based on the direction of navigation (forward or backward) and handles wrapping of the index using modulo operation. Initiate the navigation setup when the document is fully loaded.

        let currentIndex = 0;
        const totalStars = 3;

        function navigate(step) {
            const items = document.getElementsByClassName('star-item');
            items[currentIndex].classList.remove('active');
            currentIndex = (currentIndex + step + totalStars) % totalStars;
            items[currentIndex].classList.add('active');
        }

        document.addEventListener('DOMContentLoaded', function() {
            navigate(0);
        });
      

CSS

The main aesthetic feature of this component is its visual design that simulates stars to make pagination feel magical. The navigation buttons grow when hovered over thanks to CSS transforms, creating a tactile effect. Each 'star-item' is styled with radial gradients and transitions for a glowing appearance, with a special active state for currently selected items to differentiate with a stronger glow and color shift.

        .star-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
        }
        .star-nav {
            padding: 10px;
            background: none;
            border: none;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .star-nav:hover {
            transform: scale(1.2);
        }
        .star-indicator {
            display: flex;
            gap: 10px;
            padding: 0 20px;
        }
        .star-item {
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, rgba(255,215,0,1) 0%, rgba(255,215,0,1) 60%, rgba(255,255,255,0) 70%);
            border-radius: 50%;
            opacity: 0.5;
            transition: opacity 0.3s, background 0.3s;
        }
        .star-item.active {
            opacity: 1;
            background: radial-gradient(circle, rgba(255,165,0,1) 0%, rgba(255,140,0,1) 60%, rgba(255,255,255,0) 70%);
        }
      

And with these simple yet powerful steps, our Dynamic Star Pagination component is not only functional but also a stellar visual delight. Enjoy navigating through your content as if traversing a cosmic pathway!

Whole code

<div class="star-pagination">
  <button class="star-nav prev" onclick="navigate(-1)">
    <svg xmlns="http://www.w3.org/2000/svg" height="24" fill="none" viewBox="0 0 24 24" stroke="#FFD700" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M19 12h-7M12 19l-7-7 7-7"/>
    </svg>
  </button>
  <div class="star-indicator">
    <div class="star-item"></div>
    <div class="star-item"></div>
    <div class="star-item"></div>
  </div>
  <button class="star-nav next" onclick="navigate(1)">
    <svg xmlns="http://www.w3.org/2000/svg" height="24" fill="none" viewBox="0 0 24 24" stroke="#FFD700" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h7m0 7l7-7-7-7"/>
    </svg>
  </button>
</div>


<script>
let currentIndex = 0;
const totalStars = 3;

function navigate(step) {
  const items = document.getElementsByClassName('star-item');
  items[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + step + totalStars) % totalStars;
  items[currentIndex].classList.add('active');
}

document.addEventListener('DOMContentLoaded', function() {
  navigate(0);
});

</script>

<style>
.star-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
.star-nav {
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}
.star-nav:hover {
  transform: scale(1.2);
}
.star-indicator {
  display: flex;
  gap: 10px;
  padding: 0 20px;
}
.star-item {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(255,215,0,1) 0%, rgba(255,215,0,1) 60%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.3s, background 0.3s;
}
.star-item.active {
  opacity: 1;
  background: radial-gradient(circle, rgba(255,165,0,1) 0%, rgba(255,140,0,1) 60%, rgba(255,255,255,0) 70%);
}

</style>