Creare un Effetto di Cielo Stellato con HTML, CSS e JavaScript
Guardare le stelle scintillare nel cielo notturno può essere un’esperienza magica. Ma cosa succede se vogliamo portare quell’atmosfera stellata nel nostro sito web? In questo articolo, esploreremo come creare un effetto di cielo stellato utilizzando solo HTML, CSS e JavaScript. È un modo semplice ma efficace per aggiungere un tocco di fascino al design del tuo sito.
Creazione del Cielo Stellato
Per iniziare, abbiamo bisogno di un documento HTML di base che includa il nostro stile CSS e il nostro script JavaScript. Puoi copiare il seguente codice nel tuo editor preferito:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effetto di Cielo Stellato</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
.star {
position: absolute;
width: 1px;
height: 1px;
background-color: #fff;
border-radius: 50%;
animation: twinkle 1s infinite;
}
@keyframes twinkle {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<script>
// Genera stelle casuali
function generateStars() {
const totalStars = 200; // Numero totale di stelle
const sky = document.querySelector('body');
for (let i = 0; i < totalStars; i++) {
const star = document.createElement('div');
star.classList.add('star');
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
const duration = Math.random() * 2 + 0.5; // Durata casuale per l'effetto twinkling
star.style.left = x + 'px';
star.style.top = y + 'px';
star.style.animationDuration = duration + 's';
sky.appendChild(star);
}
}
generateStars();
</script>
</body>
</html>
Questo codice genera stelle casuali nel nostro “cielo” utilizzando JavaScript e le anima con un effetto twinkling utilizzando CSS.
Personalizzazione
Puoi personalizzare questo effetto modificando i valori nel codice. Ad esempio, puoi cambiare il numero di stelle regolando la variabile totalStars, oppure puoi modificare il colore delle stelle o la velocità dell’effetto twinkling modificando le proprietà CSS.
