62 lines
2.5 KiB
Plaintext
62 lines
2.5 KiB
Plaintext
---
|
|
/**
|
|
* TwinkleStars.astro
|
|
* This component creates twinkling stars that are appended to the galaxy on interval.
|
|
* Twinkle stars are removed from the document after the animation is completed.
|
|
* The svg below is just a template for the script to clone and append to the galaxy.
|
|
*/
|
|
---
|
|
|
|
<svg
|
|
id="twinkle-star"
|
|
class="template"
|
|
width="149"
|
|
height="149"
|
|
viewBox="0 0 149 149"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="absolute left-full animate-twinkle"
|
|
>
|
|
<circle cx="74" cy="74" r="11" fill="white"/>
|
|
<rect y="141.421" width="200" height="10" transform="rotate(-45 0 141.421)" fill="url(#paint0_linear_4_2)"/>
|
|
<rect x="7.07107" width="200" height="10" transform="rotate(45 7.07107 0)" fill="url(#paint1_linear_4_2)"/>
|
|
<defs>
|
|
<linearGradient id="paint0_linear_4_2" x1="0" y1="146.421" x2="200" y2="146.421" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#1E1E1E"/>
|
|
<stop offset="0.445" stop-color="white"/>
|
|
<stop offset="0.58721" stop-color="white"/>
|
|
<stop offset="1" stop-color="#1E1E1E"/>
|
|
</linearGradient>
|
|
<linearGradient id="paint1_linear_4_2" x1="7.07107" y1="5" x2="207.071" y2="5" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#1E1E1E"/>
|
|
<stop offset="0.42" stop-color="white"/>
|
|
<stop offset="0.555" stop-color="white"/>
|
|
<stop offset="1" stop-color="#1E1E1E"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
|
|
<script is:inline>
|
|
// Generate a twinkle star and append it to the galaxy, remove it after animation.
|
|
function generateTwinkleStar() {
|
|
const twinkleStarTemplate = document.getElementById("twinkle-star")
|
|
if (!twinkleStarTemplate) { return; }
|
|
// Clone the twinkle star template and set its attributes.
|
|
const twinkleStar = twinkleStarTemplate.cloneNode(true);
|
|
twinkleStar.style.position = "absolute";
|
|
twinkleStar.style.left = Math.floor(Math.random() * window.innerWidth) + "px";
|
|
twinkleStar.style.top = Math.floor(Math.random() * (window.innerHeight/3)) + "px";
|
|
twinkleStar.style.width = window.innerWidth < 768 ? Math.floor(Math.random() * (15 - 7.5 + 1) + 7.5) : Math.floor(Math.random() * (30 - 15 + 1) + 15) + "px";
|
|
twinkleStar.style.height = twinkleStar.style.width;
|
|
twinkleStar.classList.add("twinkle");
|
|
document.getElementById("galaxy").appendChild(twinkleStar);
|
|
|
|
// Remove the twinkle star after the animation is completed.
|
|
setTimeout(() => {
|
|
twinkleStar.remove();
|
|
}, 2500);
|
|
}
|
|
|
|
setInterval(generateTwinkleStar, 5000);
|
|
</script>
|
|
|