client-sites/site-1a835
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AI update: שדרוג ויזואלי מקיף לאתר עמוס רוזמרין - מהנדס אריזה:

Browse Source 
## 1. תמונות אמיתיות (הוסף מ-Unsplash/Pexels CDN):

### Hero Sectio
This commit is contained in:
ccadmingit1
2026-10-11 16:52:56 +00:00
parent 443264b72a
commit f3497f0671
8 changed files with 1860 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files
script.js
+212 -37
View File
@@ -13,7 +13,6 @@
document.body.style.overflow = isOpen ? 'hidden' : '';
});
// Close menu when clicking a link
mainNav.querySelectorAll('.nav-link').forEach(function(link) {
link.addEventListener('click', function() {
mainNav.classList.remove('open');
@@ -23,7 +22,6 @@
});
});
// Close menu when clicking outside
document.addEventListener('click', function(e) {
if (mainNav.classList.contains('open') &&
!mainNav.contains(e.target) &&
@@ -35,7 +33,6 @@
}
});
// Close menu on Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && mainNav.classList.contains('open')) {
mainNav.classList.remove('open');
@@ -50,78 +47,213 @@
// Check for reduced motion preference
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Scroll Reveal Animation
// Scroll Reveal Animation with staggered delays
const observerOptions = {
root: null,
rootMargin: '0px 0px -50px 0px',
rootMargin: '0px 0px -80px 0px',
threshold: 0.1
};
const revealObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
entries.forEach(function(entry, index) {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
// 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) {
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 {
// If reduced motion is preferred, show all elements immediately
document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el) {
el.classList.add('revealed');
});
}
// Layer animation observer for tech diagram
// 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) {
const layers = entry.target.querySelectorAll('.layer');
layers.forEach(function(layer) {
layer.classList.add('animate');
});
entry.target.classList.add('animate');
layerObserver.unobserve(entry.target);
}
});
}, { threshold: 0.3 });
const techDiagram = document.querySelector('.tech-diagram');
if (techDiagram && !prefersReducedMotion) {
layerObserver.observe(techDiagram);
} else if (techDiagram) {
techDiagram.querySelectorAll('.layer').forEach(function(layer) {
layer.style.opacity = '1';
});
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 > 100) {
header.style.background = 'rgba(26, 26, 46, 0.98)';
if (currentScrollY > 50) {
header.classList.add('scrolled');
} else {
header.style.background = 'rgba(26, 26, 46, 0.9)';
header.classList.remove('scrolled');
}
lastScrollY = currentScrollY;
}
window.addEventListener('scroll', updateHeader, { passive: true });
// Form handling (basic validation feedback)
// 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();
// Basic validation
const requiredFields = this.querySelectorAll('[required]');
let isValid = true;
@@ -129,8 +261,10 @@
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 = '';
}
});
@@ -141,28 +275,34 @@
const submitBtn = this.querySelector('button[type="submit"]');
const originalText = submitBtn.textContent;
// Simple visual feedback
submitBtn.textContent = 'שולח...';
submitBtn.disabled = true;
// Simulate form submission (replace with actual form handling)
setTimeout(function() {
submitBtn.textContent = 'נשלח בהצלחה!';
submitBtn.style.background = '#22c55e';
submitBtn.textContent = 'נשלח בהצלחה! ✓';
submitBtn.style.background = 'linear-gradient(135deg, #22c55e, #16a34a)';
setTimeout(function() {
submitBtn.textContent = originalText;
submitBtn.style.background = '';
submitBtn.disabled = false;
contactForm.reset();
}, 2000);
}, 1000);
}, 2500);
}, 1500);
});
// Clear error state on input
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');
});
});
}
@@ -179,18 +319,53 @@
targetElement.scrollIntoView({
behavior: prefersReducedMotion ? 'auto' : 'smooth'
});
// Set focus for accessibility
targetElement.setAttribute('tabindex', '-1');
targetElement.focus();
}
});
});
// Add staggered animation delay to grid items
// Staggered animation for grid items
if (!prefersReducedMotion) {
document.querySelectorAll('.expertise-grid .expertise-card, .products-grid .product-card, .advantages-grid .advantage-item, .industries-grid .industry-card').forEach(function(card, index) {
card.style.transitionDelay = (index * 0.1) + 's';
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');
});
})();