86 lines
2.6 KiB
JavaScript
86 lines
2.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const navbar = document.querySelector('.navbar');
|
|
const backToTopBtn = document.querySelector('.float-btn-up');
|
|
|
|
// Navbar scroll effect
|
|
window.addEventListener('scroll', function() {
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('scrolled');
|
|
} else {
|
|
navbar.classList.remove('scrolled');
|
|
}
|
|
|
|
// Back to top button visibility
|
|
if (window.scrollY > 300) {
|
|
if (backToTopBtn) backToTopBtn.classList.add('visible');
|
|
} else {
|
|
if (backToTopBtn) backToTopBtn.classList.remove('visible');
|
|
}
|
|
});
|
|
|
|
// Back to top functionality
|
|
if (backToTopBtn) {
|
|
backToTopBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
}
|
|
|
|
// Smooth scroll for nav links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const targetId = this.getAttribute('href');
|
|
if (targetId === '#') return;
|
|
const target = document.querySelector(targetId);
|
|
if (target) {
|
|
window.scrollTo({
|
|
top: target.offsetTop - 80,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Advanced Reveal on Scroll
|
|
const revealCallback = (entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible');
|
|
}
|
|
});
|
|
};
|
|
|
|
const revealObserver = new IntersectionObserver(revealCallback, {
|
|
threshold: 0.15,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
});
|
|
|
|
// Initialize reveal elements
|
|
const revealElements = document.querySelectorAll('.tech-card, .section-title, .hero-title, .hero-section .lead, .hero-section .btn, .case-card');
|
|
|
|
revealElements.forEach((el, index) => {
|
|
el.classList.add('reveal-init');
|
|
revealObserver.observe(el);
|
|
});
|
|
|
|
});
|
|
|
|
// Inline Styles for Reveal Transitions
|
|
const revealStyles = document.createElement('style');
|
|
revealStyles.textContent = `
|
|
.reveal-init {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
|
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
`;
|
|
document.head.appendChild(revealStyles); |