372 lines
11 KiB
JavaScript
372 lines
11 KiB
JavaScript
(function() {
|
|
'use strict';
|
|
|
|
// Mobile Menu
|
|
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
|
|
const mainNav = document.querySelector('.main-nav');
|
|
|
|
if (mobileMenuToggle && mainNav) {
|
|
mobileMenuToggle.addEventListener('click', function() {
|
|
const isOpen = mainNav.classList.toggle('open');
|
|
this.classList.toggle('open');
|
|
this.setAttribute('aria-expanded', isOpen);
|
|
document.body.style.overflow = isOpen ? 'hidden' : '';
|
|
});
|
|
|
|
mainNav.querySelectorAll('.nav-link').forEach(function(link) {
|
|
link.addEventListener('click', function() {
|
|
mainNav.classList.remove('open');
|
|
mobileMenuToggle.classList.remove('open');
|
|
mobileMenuToggle.setAttribute('aria-expanded', 'false');
|
|
document.body.style.overflow = '';
|
|
});
|
|
});
|
|
|
|
document.addEventListener('click', function(e) {
|
|
if (mainNav.classList.contains('open') &&
|
|
!mainNav.contains(e.target) &&
|
|
!mobileMenuToggle.contains(e.target)) {
|
|
mainNav.classList.remove('open');
|
|
mobileMenuToggle.classList.remove('open');
|
|
mobileMenuToggle.setAttribute('aria-expanded', 'false');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && mainNav.classList.contains('open')) {
|
|
mainNav.classList.remove('open');
|
|
mobileMenuToggle.classList.remove('open');
|
|
mobileMenuToggle.setAttribute('aria-expanded', 'false');
|
|
document.body.style.overflow = '';
|
|
mobileMenuToggle.focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Check for reduced motion preference
|
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
|
|
// Scroll Reveal Animation with staggered delays
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px 0px -80px 0px',
|
|
threshold: 0.1
|
|
};
|
|
|
|
const revealObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry, index) {
|
|
if (entry.isIntersecting) {
|
|
// Add staggered delay for grid items
|
|
const delay = entry.target.dataset.delay || 0;
|
|
setTimeout(function() {
|
|
entry.target.classList.add('revealed');
|
|
}, delay * 100);
|
|
revealObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
if (!prefersReducedMotion) {
|
|
document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el, index) {
|
|
// Add stagger delay to grid children
|
|
const parent = el.parentElement;
|
|
if (parent && (parent.classList.contains('expertise-grid') ||
|
|
parent.classList.contains('products-grid') ||
|
|
parent.classList.contains('advantages-grid') ||
|
|
parent.classList.contains('industries-grid') ||
|
|
parent.classList.contains('clients-logos-grid'))) {
|
|
el.dataset.delay = index;
|
|
}
|
|
revealObserver.observe(el);
|
|
});
|
|
} else {
|
|
document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el) {
|
|
el.classList.add('revealed');
|
|
});
|
|
}
|
|
|
|
// Counter Animation
|
|
function animateCounter(element) {
|
|
const target = parseInt(element.dataset.count, 10);
|
|
const duration = 2000;
|
|
const start = 0;
|
|
const startTime = performance.now();
|
|
|
|
function update(currentTime) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
// Easing function for smooth animation
|
|
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
|
const current = Math.floor(start + (target - start) * easeOutQuart);
|
|
|
|
element.textContent = current;
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(update);
|
|
} else {
|
|
element.textContent = target;
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(update);
|
|
}
|
|
|
|
// Observer for counter animation
|
|
const counterObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting && !prefersReducedMotion) {
|
|
const counters = entry.target.querySelectorAll('[data-count]');
|
|
counters.forEach(function(counter) {
|
|
if (!counter.classList.contains('counted')) {
|
|
counter.classList.add('counted');
|
|
animateCounter(counter);
|
|
}
|
|
});
|
|
counterObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
const statsSection = document.querySelector('.hero-stats');
|
|
if (statsSection) {
|
|
counterObserver.observe(statsSection);
|
|
}
|
|
|
|
const experienceBadge = document.querySelector('.about-experience-badge');
|
|
if (experienceBadge) {
|
|
counterObserver.observe(experienceBadge);
|
|
}
|
|
|
|
// Layer animation observer for tech section
|
|
const layerObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate');
|
|
layerObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.3 });
|
|
|
|
const layersVisual = document.querySelector('.layers-visual');
|
|
if (layersVisual && !prefersReducedMotion) {
|
|
layerObserver.observe(layersVisual);
|
|
}
|
|
|
|
// Progress bar animation
|
|
const progressObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('revealed');
|
|
progressObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
document.querySelectorAll('.tech-features li').forEach(function(li) {
|
|
if (!prefersReducedMotion) {
|
|
progressObserver.observe(li);
|
|
} else {
|
|
li.classList.add('revealed');
|
|
}
|
|
});
|
|
|
|
// Header scroll effect
|
|
const header = document.querySelector('.site-header');
|
|
let lastScrollY = 0;
|
|
|
|
function updateHeader() {
|
|
const currentScrollY = window.scrollY;
|
|
|
|
if (currentScrollY > 50) {
|
|
header.classList.add('scrolled');
|
|
} else {
|
|
header.classList.remove('scrolled');
|
|
}
|
|
|
|
lastScrollY = currentScrollY;
|
|
}
|
|
|
|
window.addEventListener('scroll', updateHeader, { passive: true });
|
|
|
|
// Parallax effect for particles
|
|
if (!prefersReducedMotion) {
|
|
window.addEventListener('scroll', function() {
|
|
const scrollY = window.scrollY;
|
|
const particles = document.querySelectorAll('.particle');
|
|
|
|
particles.forEach(function(particle, index) {
|
|
const speed = 0.1 + (index * 0.02);
|
|
particle.style.transform = `translateY(${scrollY * speed}px)`;
|
|
});
|
|
}, { passive: true });
|
|
}
|
|
|
|
// 3D Tilt effect for cards
|
|
if (!prefersReducedMotion) {
|
|
document.querySelectorAll('[data-tilt]').forEach(function(card) {
|
|
card.addEventListener('mousemove', function(e) {
|
|
const rect = card.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const centerX = rect.width / 2;
|
|
const centerY = rect.height / 2;
|
|
|
|
const rotateX = (y - centerY) / 20;
|
|
const rotateY = (centerX - x) / 20;
|
|
|
|
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`;
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
card.style.transform = '';
|
|
});
|
|
});
|
|
}
|
|
|
|
// Ripple effect for buttons
|
|
document.querySelectorAll('.btn-glow').forEach(function(btn) {
|
|
btn.addEventListener('click', function(e) {
|
|
const ripple = btn.querySelector('.btn-ripple');
|
|
if (ripple) {
|
|
ripple.style.transform = 'scale(0)';
|
|
ripple.style.opacity = '0';
|
|
|
|
setTimeout(function() {
|
|
ripple.style.transform = 'scale(2)';
|
|
ripple.style.opacity = '1';
|
|
}, 10);
|
|
|
|
setTimeout(function() {
|
|
ripple.style.transform = 'scale(0)';
|
|
ripple.style.opacity = '0';
|
|
}, 500);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Form handling
|
|
const contactForm = document.querySelector('.contact-form form');
|
|
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const requiredFields = this.querySelectorAll('[required]');
|
|
let isValid = true;
|
|
|
|
requiredFields.forEach(function(field) {
|
|
if (!field.value.trim()) {
|
|
isValid = false;
|
|
field.style.borderColor = '#ef4444';
|
|
field.style.boxShadow = '0 0 0 3px rgba(239, 68, 68, 0.15)';
|
|
} else {
|
|
field.style.borderColor = '';
|
|
field.style.boxShadow = '';
|
|
}
|
|
});
|
|
|
|
if (!isValid) {
|
|
return;
|
|
}
|
|
|
|
const submitBtn = this.querySelector('button[type="submit"]');
|
|
const originalText = submitBtn.textContent;
|
|
|
|
submitBtn.textContent = 'שולח...';
|
|
submitBtn.disabled = true;
|
|
|
|
setTimeout(function() {
|
|
submitBtn.textContent = 'נשלח בהצלחה! ✓';
|
|
submitBtn.style.background = 'linear-gradient(135deg, #22c55e, #16a34a)';
|
|
|
|
setTimeout(function() {
|
|
submitBtn.textContent = originalText;
|
|
submitBtn.style.background = '';
|
|
submitBtn.disabled = false;
|
|
contactForm.reset();
|
|
}, 2500);
|
|
}, 1500);
|
|
});
|
|
|
|
contactForm.querySelectorAll('input, textarea, select').forEach(function(field) {
|
|
field.addEventListener('input', function() {
|
|
this.style.borderColor = '';
|
|
this.style.boxShadow = '';
|
|
});
|
|
|
|
field.addEventListener('focus', function() {
|
|
this.parentElement.classList.add('focused');
|
|
});
|
|
|
|
field.addEventListener('blur', function() {
|
|
this.parentElement.classList.remove('focused');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
|
anchor.addEventListener('click', function(e) {
|
|
const targetId = this.getAttribute('href');
|
|
if (targetId === '#') return;
|
|
|
|
const targetElement = document.querySelector(targetId);
|
|
if (targetElement) {
|
|
e.preventDefault();
|
|
targetElement.scrollIntoView({
|
|
behavior: prefersReducedMotion ? 'auto' : 'smooth'
|
|
});
|
|
targetElement.setAttribute('tabindex', '-1');
|
|
targetElement.focus();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Staggered animation for grid items
|
|
if (!prefersReducedMotion) {
|
|
const grids = [
|
|
'.expertise-grid .expertise-card',
|
|
'.products-grid .product-card',
|
|
'.advantages-grid .advantage-item',
|
|
'.industries-grid .industry-card',
|
|
'.clients-logos-grid .client-logo-card'
|
|
];
|
|
|
|
grids.forEach(function(selector) {
|
|
document.querySelectorAll(selector).forEach(function(card, index) {
|
|
card.style.transitionDelay = (index * 0.1) + 's';
|
|
});
|
|
});
|
|
}
|
|
|
|
// Typewriter effect for hero title (optional enhancement)
|
|
const typewriterElement = document.querySelector('.typewriter');
|
|
if (typewriterElement && !prefersReducedMotion) {
|
|
const text = typewriterElement.textContent;
|
|
typewriterElement.textContent = '';
|
|
typewriterElement.style.opacity = '1';
|
|
|
|
let i = 0;
|
|
function typeWriter() {
|
|
if (i < text.length) {
|
|
typewriterElement.textContent += text.charAt(i);
|
|
i++;
|
|
setTimeout(typeWriter, 50);
|
|
}
|
|
}
|
|
|
|
// Start typewriter after page load
|
|
setTimeout(typeWriter, 800);
|
|
}
|
|
|
|
// Initialize on DOM ready
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Add loaded class to body for CSS animations
|
|
document.body.classList.add('loaded');
|
|
});
|
|
|
|
})();
|