Esercizio 12: Advanced CSS + JS

By adding some Javascript and SVGs, we can complete the styling of this text animation.

First, we add three SVG stars, put them inside a span element and give them the "magic-star" class.

<span class="magic-star">
    <svg viewBox="0 0 512 512">
        <path d="M512 255.1c0 11.34-7.406 
        20.86-18.44 23.64l-171.3 42.78l-42.78 
        171.1C276.7 504.6 267.2 512 255.9 
        512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 
        279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 
        7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 
        7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 
        171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
    </svg>
</span>
                            

Then, we style the stars so that they have a strict size, behave as block, have an absolute position and a variable-based position, and they can scale up and down based on height and width variables.

h1 > .magic > .magic-star {
--size: clamp(20px, 1.5vw, 30px);

animation: scale 700ms ease forwards;
display: block;
height: var(--size);
left: var(--star-left);
position: absolute;
top: var(--star-top);
width: var(--size);
}

Here comes JS: what we need is to change the stars position. First we must give a relative position to the span so that absolute works.

We create a function that generates a random number based on a minimu and maximum range.

// Function to generate a random number between 'min' and 'max'
function rand(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Then we initialize two variables

let index = 0;
let interval = 1000;

Based on these two, we create an animation function.

We need to change the property of the star so that its variables --star-left and --star-top are randomized each time.

We also need to reset the animation each time, and force the browser to re-calculate the element's properties.

function animate(star) {
// Set the star's left and top position randomly within the specified range
star.style.setProperty("--star-left", rand(-10, 100) + '%');
star.style.setProperty("--star-top", rand(-40, 80) + '%');

// Reset the star's animation
star.style.animation = 'none';
star.offsetHeight; // Force the browser to re-calculate the element's properties
star.style.animation = '';
}

Now the fun part: let's select all the starts, and create a list of them:

var stars = document.getElementsByClassName("magic-star");
                    

1. A for loop is used to iterate over each element in the stars array.
2. An Immediately Invoked Function Expression (IIFE) is used to preserve the value of i (the index of the current star in the stars array) for each iteration. This is necessary because the setTimeout and setInterval functions used later in the code create new function scopes, and without the IIFE, they would all share the same value of i.
3. A setTimeout function is used to set a delay for the initial animation of each star. The delay is determined by the current index multiplied by a third of the interval variable value (which is 1000 / 3).
4. The animate function is called for the current star element, using the preserved index value.
5. A setInterval function is set up to repeatedly call the animate function for the current star element, with a delay equal to the interval variable value (1000ms or 1 second).
6. The setTimeout function is closed, and the IIFE is immediately invoked with the current value of i.

In summary, this snippet sets an initial delay for each star's animation and then repeatedly animates each star with a 1-second interval. The IIFE is used to preserve the index value for each star in the loop.

// Loop through each star and set up the animation
for (var i = 0; i < stars.length; i++) {
    // Use an immediately invoked function expression (IIFE) to preserve the index value
    (function(index) {
    // Set a delay for each star's initial animation
    setTimeout(function() {
        // Call the animate function for the current star
        animate(stars[index]);

        // Set an interval to repeatedly call the animate function for the current star
        setInterval(function() {
        animate(stars[index]);
        }, 1000);
    }, index * (interval / 3));
    })(i);
}

We can see here the final animation. Thanks to Hyperplexed for the design recreation.