diff --git a/static/css/styles.css b/static/css/styles.css index f8cdc88..109496d 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -307,6 +307,43 @@ hr { margin: 40px auto 64px auto; padding-bottom: 64px; color: var(--white); + position: relative; +} + +.home-info::before { + content: ''; + position: absolute; + top: 0; + left: -5%; + width: 110%; + height: 100%; + pointer-events: none; + z-index: 0; +} + +.home-info > * { + position: relative; + z-index: 1; +} + +.star { + position: absolute; + border-radius: 50%; + background: rgba(255, 255, 255, 0.6); + pointer-events: none; + animation: starFade var(--duration) ease-in-out infinite; + animation-delay: var(--delay); +} + +@keyframes starFade { + 0%, 100% { + opacity: 0; + transform: scale(0); + } + 50% { + opacity: 1; + transform: scale(1); + } } .team-info { diff --git a/static/js/scripts.js b/static/js/scripts.js index 16cae60..84440d1 100644 --- a/static/js/scripts.js +++ b/static/js/scripts.js @@ -96,6 +96,7 @@ document.addEventListener('DOMContentLoaded', function() { initPageLoadAnimation(); initCustomCursor(); initScrollIndicator(); + initStars(); }); function initParallaxEffects() { @@ -389,3 +390,33 @@ function initScrollIndicator() { indicator.style.width = progress + '%'; }); } + +function initStars() { + const sections = document.querySelectorAll('.home-info'); + + sections.forEach(section => { + const sectionHeight = section.offsetHeight; + const sectionWidth = section.offsetWidth; + const numStars = Math.floor((sectionWidth * sectionHeight) / 15000); + + for (let i = 0; i < numStars; i++) { + const star = document.createElement('div'); + star.className = 'star'; + + const size = Math.random() * 3 + 1; + const x = Math.random() * 100; + const y = Math.random() * 100; + const duration = Math.random() * 3 + 2; + const delay = Math.random() * 3; + + star.style.width = size + 'px'; + star.style.height = size + 'px'; + star.style.left = x + '%'; + star.style.top = y + '%'; + star.style.setProperty('--duration', duration + 's'); + star.style.setProperty('--delay', delay + 's'); + + section.appendChild(star); + } + }); +}