Spaces:
Running
Running
Update script.js
Browse files
script.js
CHANGED
@@ -1,3 +1,5 @@
|
|
|
|
|
|
1 |
// Smooth scrolling for nav links
|
2 |
document.querySelectorAll('a.nav-link').forEach(anchor => {
|
3 |
anchor.addEventListener('click', function(e) {
|
@@ -7,15 +9,30 @@ document.querySelectorAll('a.nav-link').forEach(anchor => {
|
|
7 |
});
|
8 |
});
|
9 |
|
10 |
-
//
|
11 |
const observer = new IntersectionObserver((entries) => {
|
12 |
entries.forEach(entry => {
|
13 |
if (entry.isIntersecting) {
|
14 |
entry.target.classList.add('animate__animated', 'animate__fadeInUp');
|
|
|
|
|
|
|
15 |
}
|
16 |
});
|
17 |
-
});
|
18 |
|
19 |
-
document.querySelectorAll('.card, h2, .lead').forEach(el => {
|
20 |
observer.observe(el);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
21 |
});
|
|
|
1 |
+
// 👻 GhostPack Interactivity 😈
|
2 |
+
|
3 |
// Smooth scrolling for nav links
|
4 |
document.querySelectorAll('a.nav-link').forEach(anchor => {
|
5 |
anchor.addEventListener('click', function(e) {
|
|
|
9 |
});
|
10 |
});
|
11 |
|
12 |
+
// Scroll reveal animations
|
13 |
const observer = new IntersectionObserver((entries) => {
|
14 |
entries.forEach(entry => {
|
15 |
if (entry.isIntersecting) {
|
16 |
entry.target.classList.add('animate__animated', 'animate__fadeInUp');
|
17 |
+
if (entry.target.classList.contains('card')) {
|
18 |
+
entry.target.classList.add('ghost-animation');
|
19 |
+
}
|
20 |
}
|
21 |
});
|
22 |
+
}, { threshold: 0.2 });
|
23 |
|
24 |
+
document.querySelectorAll('.card, h2, .lead, section').forEach(el => {
|
25 |
observer.observe(el);
|
26 |
+
});
|
27 |
+
|
28 |
+
// Ghost hover effect on cards
|
29 |
+
document.querySelectorAll('.card').forEach(card => {
|
30 |
+
card.addEventListener('mouseenter', () => {
|
31 |
+
card.style.transform = 'translateY(-10px) scale(1.02)';
|
32 |
+
card.style.boxShadow = '0 0 30px rgba(0, 255, 204, 0.7)';
|
33 |
+
});
|
34 |
+
card.addEventListener('mouseleave', () => {
|
35 |
+
card.style.transform = 'translateY(0) scale(1)';
|
36 |
+
card.style.boxShadow = '0 0 15px rgba(0, 255, 204, 0.3)';
|
37 |
+
});
|
38 |
});
|