In this tutorial, we’re going to implement an animated snow effect on a webpage using CSS and vanilla JavaScript, just in time for the holiday season. ‘Tis the season to be jolly so let it snow, let it snow, let it snow! 1. Markup with Holiday HTMLFor our markup, we’ll have two primary containers: a main element containing the content of our page and a snow-container element that will display the snow.
2. Animated Snow Styling with CSSIn this demo, our main content has a gradient background colour to give it a night sky effect. We achieve this using the CSS linear-gradient function. For simplicity, let’s say we’re building this animated snow in CodePen, so the markup goes in the HTML tab, the styles in the CSS tab, etc.
Here’s what our banner looks like now: We’ll also use CSS to handle the animation of each snow element. Each snowflake will have two animations: a fall animation to handle the snowflake moving from the top to the bottom of the screen and a sway animation to handle moving the snowflake slowly side to side.
We’ll also style our snow container and the snow element we’ll be creating in JavaScript.
The animation property in this demo takes three values:
3. Fa la la la la Functionality ♬Now we can work on the fun part: making it snow! First, in the JS tab in CodePen, let’s assign a value to our container element:
For our snowflake content, we’ll be using HTML symbols (❄ ❅ ❆): We’ll create a
In order to create a falling snow effect, we’ll need to randomise the appearance and animation of each snowflake. We’ll use the
Now we can create a function to generate a random style for each snowflake. We’ll generate a random position, size and animation duration.
For our duration and size constant, we add a fixed number value to ensure the random generated number has a minimum value of the number being added (i.e. the lowest number for the animation duration of any snowflake is 10s) For our top constant, we assign a negative value so the snowflakes starts from any percentage above the visible screen. Next, we’ll handle appending the snowflakes to the snow container.
In this demo, we use a for loop to create a fixed number of snowflakes and append them to the container. We also randomly assign the innerHTML as any of the values in our Then, we’ll call the
And it’s snowing! Click Rerun to see the animated snow: Removing SnowflakesWe can also choose to add a function to remove the snowflakes.
In this function, we assign our snowContainer an opacity of 0 to allow it fade out smoothly and then, after half a second, we remove the container using the We can then choose to call this function however we want. We can remove the snow when the user clicks anywhere on the page:
Or we can include it in setTimeout() function so it disappears after a certain amount of time:
Switching Out the SnowflakesSince we’ve built this from scratch, we can also update the element content and animation to create other fun effects, like floating balloons: or even animated Nyan Cat: I hope you enjoyed this animated snow tutorial, and it’s made you feel nice and festive! More Wintery and Animated Snow Tutorialsvia Pixel Lyft https://ift.tt/ShM0VNA
0 Comments
Leave a Reply. |
Top ranked Las Vegas SEO company. Expert SEO services that are affordable, low cost for small business. |