dhanush.s/kodepilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: loading animation

Browse Source
This commit is contained in:
dhanush.s 2025-09-26 10:04:36 +05:30 committed by rajesh.n
parent 402e7783cf
commit aec5da395b
3 changed files with 754 additions and 618 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1359
index.html
View File

File diff suppressed because it is too large Load Diff

7
main.css
View File

@ -260,7 +260,7 @@
.mnc-box { .mnc-box {
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 1200px; max-width: 1159px;
} }
@ -277,6 +277,7 @@
font-weight: 600; font-weight: 600;
font-size: 1.3vw; font-size: 1.3vw;
white-space: nowrap; white-space: nowrap;
margin-top: -5px;
} }
.mnc h2 .gray, .mnc h2 .gray,
@ -704,13 +705,11 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.image-container:hover { .image-container:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
} }
.slide1-box img { .slide1-box img {
@ -1342,7 +1341,7 @@
} }
.card-easy-left img { .card-easy-left img {
width: 80%; width: 100%;
border-radius: 15px; border-radius: 15px;
} }

6
main.js
View File

@ -194,19 +194,18 @@ document.addEventListener("DOMContentLoaded", () => {
const track = document.querySelector(".move-slider-track"); const track = document.querySelector(".move-slider-track");
const boxes = Array.from(track.children); const boxes = Array.from(track.children);
// Clone all slides once
boxes.forEach(box => { boxes.forEach(box => {
const clone = box.cloneNode(true); const clone = box.cloneNode(true);
track.appendChild(clone); track.appendChild(clone);
}); });
let position = 0; let position = 0;
const speed = 1; // pixels per frame, adjust for faster/slower scroll const speed = 1;
function animate() { function animate() {
position -= speed; position -= speed;
if (Math.abs(position) >= track.scrollWidth / 2) { if (Math.abs(position) >= track.scrollWidth / 2) {
position = 0; // reset after first set slides out position = 0;
} }
track.style.transform = `translateX(${position}px)`; track.style.transform = `translateX(${position}px)`;
requestAnimationFrame(animate); requestAnimationFrame(animate);
@ -224,7 +223,6 @@ const observer = new IntersectionObserver((entries) => {
const index = Array.from(statItems).indexOf(entry.target); const index = Array.from(statItems).indexOf(entry.target);
entry.target.style.transitionDelay = `${(index + 1) * 0.1}s`; entry.target.style.transitionDelay = `${(index + 1) * 0.1}s`;
entry.target.classList.add('visible'); entry.target.classList.add('visible');
// observer.unobserve(entry.target); // optional: animate only once
} }
}); });
}, { threshold: 0.2 }); // 20% visible }, { threshold: 0.2 }); // 20% visible