File size: 3,951 Bytes
94675f7 | 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | // Main JavaScript for NanoMatter Technologies
// Intersection Observer for scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Initialize scroll animations
document.addEventListener('DOMContentLoaded', function() {
// Add fade-in class to all sections
const sections = document.querySelectorAll('section');
sections.forEach(section => {
section.classList.add('fade-in');
observer.observe(section);
});
// Add particles to hero section
createParticles();
// Initialize feather icons
feather.replace();
});
// Particle animation for hero section
function createParticles() {
const heroSection = document.querySelector('section:first-of-type');
const particleCount = 20;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
// Random position
const left = Math.random() * 100;
const top = Math.random() * 100;
const size = Math.random() * 3 + 2;
const delay = Math.random() * 5;
const duration = Math.random() * 3 + 4;
particle.style.left = `${left}%`;
particle.style.top = `${top}%`;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.animationDelay = `${delay}s`;
particle.style.animationDuration = `${duration}s`;
heroSection.appendChild(particle);
}
}
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Form handling
document.querySelector('form')?.addEventListener('submit', function(e) {
e.preventDefault();
// Simple form validation
const formData = new FormData(this);
const data = Object.fromEntries(formData);
// Check if all fields are filled
const allFilled = Object.values(data).every(value => value.trim() !== '');
if (allFilled) {
// Show success message (in a real app, you would send this to a server)
const submitBtn = this.querySelector('button[type="submit"]');
const originalText = submitBtn.textContent;
submitBtn.textContent = 'Sending...';
submitBtn.disabled = true;
// Simulate API call
setTimeout(() => {
submitBtn.textContent = 'Message Sent!';
submitBtn.style.background = '#16a34a';
setTimeout(() => {
submitBtn.textContent = originalText;
submitBtn.disabled = false;
this.reset();
}, 2000);
}, 1000);
} else {
alert('Please fill in all fields');
}
});
// Add loading animation to technology icons
document.querySelectorAll('.tech-icon, .service-icon').forEach(icon => {
icon.addEventListener('mouseenter', function() {
const featherIcon = this.querySelector('[data-feather]');
if (featherIcon) {
featherIcon.style.transform = 'scale(1.1)';
});
icon.addEventListener('mouseleave', function() {
const featherIcon = this.querySelector('[data-feather]');
if (featherIcon) {
featherIcon.style.transform = 'scale(1)';
});
});
// Mobile menu toggle (handled in navbar component)
// This is kept here for any additional functionality |