Travel Counters Section
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Travel Counters</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body class="bg-gray-100"> <!-- Travel Counter Section --> <section class="relative bg-cover bg-center py-24 px-6 sm:px-12 md:px-20 lg:px-32" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1350&q=80');"> <div class="absolute inset-0 animated-bg bg-gradient-to-r from-blue-900/80 via-indigo-800/70 to-pink-800/70"></div> <div class="relative z-10 text-center text-white"> <h2 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-14 drop-shadow-lg"> Explore the World With Us </h2> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-10"> <!-- Counter Item --> <div class="p-8 bg-white/10 backdrop-blur-xl rounded-2xl shadow-lg hover:scale-105 transition transform duration-500 fade-up"> <i class="fas fa-plane-departure text-yellow-300 text-5xl mb-4"></i> <div class="text-5xl font-bold text-yellow-300 counter" data-target="1500">0</div> <p class="mt-3 text-xl font-medium">Flights Booked</p> </div> <div class="p-8 bg-white/10 backdrop-blur-xl rounded-2xl shadow-lg hover:scale-105 transition transform duration-500 fade-up"> <i class="fas fa-hotel text-yellow-300 text-5xl mb-4"></i> <div class="text-5xl font-bold text-yellow-300 counter" data-target="800">0</div> <p class="mt-3 text-xl font-medium">Hotels Reserved</p> </div> <div class="p-8 bg-white/10 backdrop-blur-xl rounded-2xl shadow-lg hover:scale-105 transition transform duration-500 fade-up"> <i class="fas fa-globe-americas text-yellow-300 text-5xl mb-4"></i> <div class="text-5xl font-bold text-yellow-300 counter" data-target="65">0</div> <p class="mt-3 text-xl font-medium">Countries Covered</p> </div> <div class="p-8 bg-white/10 backdrop-blur-xl rounded-2xl shadow-lg hover:scale-105 transition transform duration-500 fade-up"> <i class="fas fa-users text-yellow-300 text-5xl mb-4"></i> <div class="text-5xl font-bold text-yellow-300 counter" data-target="12000">0</div> <p class="mt-3 text-xl font-medium">Happy Travelers</p> </div> </div> </div> </section> </body> </html>
CSS
.counter { font-variant-numeric: tabular-nums; } .fade-up { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .fade-up.show { opacity: 1; transform: translateY(0); } .animated-bg { background-size: 200% 200%; animation: gradientMove 10s infinite alternate; } @keyframes gradientMove { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
JavaScript
const counters = document.querySelectorAll('.counter'); let started = false; function animateCounter(counter) { const target = +counter.getAttribute('data-target'); let count = 0; const duration = 2000; // ms const stepTime = 16; // ~60fps const increment = target / (duration / stepTime); function updateCounter() { count += increment; if (count < target) { counter.innerText = Math.floor(count).toLocaleString(); requestAnimationFrame(updateCounter); } else { counter.innerText = target.toLocaleString(); } } updateCounter(); } function checkScroll() { const section = document.querySelector('section'); const rect = section.getBoundingClientRect(); if (!started && rect.top < window.innerHeight && rect.bottom > 0) { document.querySelectorAll('.fade-up').forEach(el => el.classList.add('show')); counters.forEach(counter => animateCounter(counter)); started = true; } } window.addEventListener('scroll', checkScroll); window.addEventListener('load', checkScroll);
Output Preview
Desktop
Mobile
Fullscreen