موقعي - هيدر متحرك

سأقوم بإنشاء هيدر متحرك يحتوي على تأثيرات حركية جميلة، لوجو متحرك، وخيارات للوضع الليلي والنهاري. موقعي - هيدر متحرك :root { --primary-day: #4a6fa5; --secondary-day: #6b8cae; --text-day: #333; --bg-day: #f5f7fa; --primary-night: #2c3e50; --secondary-night: #34495e; --text-night: #ecf0f1; --bg-night: #1a1a2e; } body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; transition: background 0.5s ease; } .header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; position: relative; overflow: hidden; transition: all 0.5s ease; } .header.day-mode { background: linear-gradient(135deg, var(--primary-day), var(--secondary-day)); color: var(--text-day); } .header.night-mode { background: linear-gradient(135deg, var(--primary-night), var(--secondary-night)); color: var(--text-night); } .logo-container { display: flex; align-items: center; cursor: pointer; } .logo-circle { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; justify-content: center; align-items: center; margin-left: 10px; animation: pulse 2s infinite alternate; } .logo-inner { width: 30px; height: 30px; border-radius: 50%; background: white; animation: rotate 8s linear infinite; } .logo-text { font-size: 1.5rem; font-weight: bold; transition: transform 0.3s ease; } .logo-container:hover .logo-text { transform: scale(1.1); } .nav-links { display: flex; gap: 1.5rem; } .nav-link { color: inherit; text-decoration: none; font-weight: 500; padding: 0.5rem 1rem; border-radius: 20px; transition: all 0.3s ease; position: relative; } .nav-link:hover { background: rgba(255, 255, 255, 0.2); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: white; transition: all 0.3s ease; } .nav-link:hover::after { width: 100%; left: 0; } .mode-toggle { cursor: pointer; } .toggle-circle { width: 60px; height: 30px; border-radius: 15px; background: rgba(255, 255, 255, 0.3); position: relative; transition: all 0.3s ease; } .sun, .moon { position: absolute; width: 24px; height: 24px; border-radius: 50%; top: 3px; transition: all 0.3s ease; } .sun { background: #f1c40f; left: 3px; box-shadow: 0 0 10px #f1c40f; } .moon { background: #ecf0f1; right: 3px; opacity: 0; box-shadow: 0 0 10px #ecf0f1; } .header.day-mode .sun { opacity: 1; } .header.day-mode .moon { opacity: 0; transform: translateX(30px); } .header.night-mode .sun { opacity: 0; transform: translateX(-30px); } .header.night-mode .moon { opacity: 1; } .header.night-mode .toggle-circle { background: rgba(0, 0, 0, 0.3); } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 100% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%); animation: shine 3s infinite; z-index: 0; } @keyframes shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } document.addEventListener('DOMContentLoaded', function() { const header = document.querySelector('.header'); const toggle = document.querySelector('.mode-toggle'); const body = document.body; // تبديل الوضع الليلي/النهاري toggle.addEventListener('click', function() { header.classList.toggle('day-mode'); header.classList.toggle('night-mode'); if (header.classList.contains('night-mode')) { body.style.background = 'var(--bg-night)'; body.style.color = 'var(--text-night)'; } else { body.style.background = 'var(--bg-day)'; body.style.color = 'var(--text-day)'; } }); // تأثيرات حركية عند التمرير let lastScroll = 0; window.addEventListener('scroll', function() { const currentScroll = window.pageYOffset; if (currentScroll <= 0) { header.style.transform = 'translateY(0)'; header.style.boxShadow = 'none'; } else if (currentScroll > lastScroll) { // التمرير لأسفل header.style.transform = 'translateY(-100%)'; } else { // التمرير لأعلى header.style.transform = 'translateY(0)'; header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)'; } lastScroll = currentScroll; }); // تأثير اهتزاز للوحة عند النقر const logo = document.querySelector('.logo-container'); logo.addEventListener('click', function() { this.style.animation = 'none'; setTimeout(() => { this.style.animation = 'pulse 2s infinite alternate'; }, 10); }); });