EFFETTO COSTELLAZIONE IN PURO CSS
Progetto FREE
un effetto non invasivo facilmente personalizzabile tramite CSS
- Si può inserire al passo 3 Codice - Statistiche per renderlo operativo su tutto il sito. Suggerisco di valutare anche la possibilità di inserirlo su pagine di vostro gradimento nelle proprietà di pagina come in questo esempio.
- Il codice va inserito in ESPERTO - prima della chiusura del tag HEAD.
- Compatibile anche su cellulari.
CODICE ▼
<style> /* Contenitore delle stelle Puro CSS by Max */ .constellation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } /* Stelle animate */ .star { position: absolute; background-color: white; width: 3px; height: 3px; border-radius: 50%; opacity: 0.8; animation: twinkle 3s infinite alternate ease-in-out; } /* Linee di connessione */ .line { position: absolute; background-color: rgba(255, 255, 255, 0.3); width: 1px; height: 1px; opacity: 0.5; } /* Effetto di scintillio */ @keyframes twinkle { 0% { opacity: 0.3; transform: scale(1); } 100% { opacity: 1; transform: scale(1.2); } } </style> <script> document.addEventListener("DOMContentLoaded", function () { const numStars = 40; // Numero di stelle const container = document.createElement("div"); container.className = "constellation"; document.body.appendChild(container); let stars = []; // Crea le stelle con posizione casuale for (let i = 0; i < numStars; i++) { let star = document.createElement("div"); star.className = "star"; let x = Math.random() * window.innerWidth; let y = Math.random() * window.innerHeight; star.style.left = `${x}px`; star.style.top = `${y}px`; container.appendChild(star); stars.push({ x, y, dx: (Math.random() - 0.5) * 0.5, dy: (Math.random() - 0.5) * 0.5, element: star }); } function animateStars() { container.innerHTML = ''; // Pulisce le linee prima di ridisegnarle stars.forEach(star => { // Movimento lento e fluido star.x += star.dx; star.y += star.dy; // Rimbalzo ai bordi if (star.x <= 0 || star.x >= window.innerWidth) star.dx *= -1; if (star.y <= 0 || star.y >= window.innerHeight) star.dy *= -1; // Applica nuova posizione star.element.style.left = `${star.x}px`; star.element.style.top = `${star.y}px`; container.appendChild(star.element); }); // Ridisegna le linee di connessione for (let i = 0; i < numStars; i++) { for (let j = i + 1; j < numStars; j++) { let dist = Math.hypot(stars[i].x - stars[j].x, stars[i].y - stars[j].y); if (dist < 150) { let line = document.createElement("div"); line.className = "line"; let xMid = (stars[i].x + stars[j].x) / 2; let yMid = (stars[i].y + stars[j].y) / 2; let angle = Math.atan2(stars[j].y - stars[i].y, stars[j].x - stars[i].x); let length = dist; line.style.width = `${length}px`; line.style.transform = `rotate(${angle}rad)`; line.style.left = `${xMid - length / 2}px`; line.style.top = `${yMid}px`; container.appendChild(line); } } } requestAnimationFrame(animateStars); } animateStars(); }); </script> |