Back

Revolutionizing Navigation with Infinite Orbital Pagination

Discover the Infinite Orbital Pagination, a fresh navigational experience inspired by planetary orbits where pages revolve seamlessly and infinitely.

Component Explanation

Creating an Infinite Orbital Pagination

HTML

Our HTML layout defines the structure of the orbital pagination using semantic tags that enhance navigability and accessibility.

        <div class="orbital-pagination-container">
          <nav aria-label="Gallery navigation">
            <ul class="orbital-pagination">
              <li><button aria-label="Go to previous page" class="orbital-nav prev">&larr;</button></li>
              <li class="planet current"><span aria-current="page"></span></li>
              <li class="planet"><span></span></li>
              <li class="planet"><span></span></li>
              <li><button aria-label="Go to next page" class="orbital-nav next">&rarr;</button></li>
            </ul>
          </nav>
        </div>

Notice how each button includes an 'aria-label' to ensure screen readers can convey their purpose. The <span aria-current="page"> indicates the current page to assistive technologies.

CSS and Visual Styling

The CSS reflects a blend of utilitarian design with modern aesthetics like glassmorphism, and dynamic planet movements.

        .orbital-pagination-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background-color: rgba(255, 255, 255, 0.05);
          backdrop-filter: blur(10px);
        }
        .orbital-pagination {
          display: flex;
          list-style-type: none;
          padding: 0;
          margin: 0;
        }
        .orbital-nav {
          background: transparent;
          border: none;
          cursor: pointer;
          font-size: 24px;
          margin: 0 20px;
          transition: opacity 0.3s;
        }
        .orbital-nav:hover {
          opacity: 0.7;
        }
        .planet {
          position: relative;
          width: 30px;
          height: 30px;
          margin: 0 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          background: radial-gradient(circle, #ff4da6, #c41d7f);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          transition: transform 1s ease-in-out;
        }
        .planet.current {
          transform: scale(1.5);
          background: radial-gradient(circle, #1e90ff, #00bfff);
          box-shadow: 0 0 15px rgba(30, 144, 255, 0.7);
        }

We've used contrast and color transitions to enhance visibility of the current page marker.

JavaScript

This script manages the seamless paging transitions, embracing the infinite pagination model.

        let currentPage = 0;
        const planets = document.querySelectorAll('.planet');
        function updatePagination() {
          planets.forEach((planet, index) => {
            planet.classList.toggle('current', index === currentPage);
          });
        }
        document.querySelector('.next').addEventListener('click', () => {
          currentPage = (currentPage + 1) % planets.length;
          updatePagination();
        });
        document.querySelector('.prev').addEventListener('click', () => {
          currentPage = (currentPage - 1 + planets.length) % planets.length;
          updatePagination();
        });
        updatePagination();

JavaScript dynamically updates the current page using modular arithmetic to wrap around, creating an infinite loop.

Whole code

<div class="orbital-pagination-container">
  <nav aria-label="Gallery navigation">
    <ul class="orbital-pagination">
      <li><button aria-label="Go to previous page" class="orbital-nav prev">&larr;</button></li>
      <li class="planet current"><span aria-current="page"></span></li>
      <li class="planet"><span></span></li>
      <li class="planet"><span></span></li>
      <li><button aria-label="Go to next page" class="orbital-nav next">&rarr;</button></li>
    </ul>
  </nav>
</div>


<script>
let currentPage = 0;
const planets = document.querySelectorAll('.planet');
function updatePagination() {
  planets.forEach((planet, index) => {
    planet.classList.toggle('current', index === currentPage);
  });
}
document.querySelector('.next').addEventListener('click', () => {
  currentPage = (currentPage + 1) % planets.length;
  updatePagination();
});
document.querySelector('.prev').addEventListener('click', () => {
  currentPage = (currentPage - 1 + planets.length) % planets.length;
  updatePagination();
});
updatePagination();
</script>

<style>
.orbital-pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.orbital-pagination {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.orbital-nav {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 24px;
  margin: 0 20px;
  transition: opacity 0.3s;
}
.orbital-nav:hover {
  opacity: 0.7;
}
.planet {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #ff4da6, #c41d7f);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: transform 1s ease-in-out;
}
.planet.current {
  transform: scale(1.5);
  background: radial-gradient(circle, #1e90ff, #00bfff);
  box-shadow: 0 0 15px rgba(30, 144, 255, 0.7);
}

</style>

Thank you for reading this article.

Revolutionizing Navigation with Infinite Orbital Pagination

Component Explanation

Creating an Infinite Orbital Pagination

HTML

CSS and Visual Styling

JavaScript

Whole code

Comments

More paginations

Similar

See also