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">←</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">→</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">←</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">→</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.
Comments