File size: 1,793 Bytes
b3ce9c1 04ce8fc 205e965 b3ce9c1 04ce8fc 205e965 04ce8fc 205e965 04ce8fc 205e965 04ce8fc 205e965 04ce8fc 205e965 04ce8fc |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
document.addEventListener('DOMContentLoaded', function() {
// Parallax effect
const hero = document.querySelector('.hero');
window.addEventListener('scroll', function() {
const scroll = window.pageYOffset;
hero.style.transform = `translateY(${scroll * 0.3}px)`;
});
// Dynamic header
const header = document.querySelector('custom-header');
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
header.shadowRoot.host.style.background = 'rgba(0, 0, 0, 0.95)';
header.shadowRoot.host.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.3)';
} else {
header.shadowRoot.host.style.background = 'rgba(0, 0, 0, 0.9)';
header.shadowRoot.host.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.1)';
}
});
// Animate elements on scroll
const animateOnScroll = function() {
const elements = document.querySelectorAll('.grid-item, .about-content');
elements.forEach(el => {
const elementTop = el.getBoundingClientRect().top;
if (elementTop < window.innerHeight - 100) {
el.style.opacity = '1';
el.style.transform = 'translateY(0)';
}
});
};
// Set initial state
document.querySelectorAll('.grid-item, .about-content').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)';
});
window.addEventListener('scroll', animateOnScroll);
animateOnScroll(); // Run once on load
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
});
|