This is the fourth day of my participation in Gwen Challenge

preface

Summer in the south, it’s really hot. What if your girl is unreasonable and wants to see snow?

em… We have to satisfy her, we can try to give her a snow

Train of thought

To make it easier to read, I have simply divided the article into two parts

First of all, I found a former elite official website and took the snowflakes on its screen as an example. I chose it mainly because I thought it was pretty. The following

See how they write it

First, look at the HTML

Several conclusions can be drawn from the above picture

  1. One snowflake for every snowflakeimgElement, and all the snowflakes are the same picture
  2. throughjsDynamically control the size and location of snowflakes, and we can guess that the number of snowflakes should also be determined byjsThe control of the

Next, find the code for “snow.

snow()
/* Snowflakes fall */
function snow() {$(document).snowfall({
        image: "//game.gtimg.cn/images/gp/web201908/flake_black.png".flakeCount: 50.minSpeed: 0.7.minSize: 3.maxSize: 20});setTimeout(function () {$('#element').snowfall('clear');
    }, 300000000);
}
Copy the code

The core function snow relies on the snowfall function. And we can guess that Snowfall is probably provided by jQuery or a jQUERy-based plug-in. Also, you can see that Snowfall can accept a string or an object as an argument. We can further guess that if a string clear is accepted as an argument, it means clearing snow. If you take an object, image represents the SRC of the IMG element, flakeCount represents the number of snowflakes, minspeed represents the minimum speed, minSize represents the minimum size, and maxSize represents the maximum size to generate snowflakes, among other things

To verify my claim, I looked up Snowfall

As you can see (1) the introduction of a snowfall.jquery.min.js file (2) the introduction of jquery-1.9.1.min.js does further confirm my suspicions: Snowfall may be provided by jQuery or a jQUERy-based plug-in. Those of you who know jQuery know that there is no method of Snowfall in jQuery. So snowfall is provided by snowfall.jquery.min.js, but I wanted to look at the source code of Snowfall. After two minutes, I found out how to use it in detail on Github. And the choices are exactly what we thought they would be, Here are all configuration options flakeCount flakeColor, flakeIndex, minSize, maxSize, minSpeed, maxSpeed, round, shadow more details can be stepped on snowfall snowfall

From the above, we understand the implementation principle of full screen snowflakes. In fact, snowfall function is used to batch generate a specified number of snowflakes of different sizes and falling speeds. Let’s use Snowfall to create our own full-screen snowflakes

Simulation to achieve full screen snowflake

Understand the principle, simulation is very simple, just call a function. The following code

<! DOCTYPEhtml>
<html lang="zh">
<style>
    body {
        background-color: #add8e6;
    }
</style>
<body></body>
<script src="./jquery.min.js"></script>
<script src="./snowfall.jquery.js"></script>
<script>
    $(document).snowfall({
        image: "images/flake_black.png".flakeCount: 20.minSpeed: 0.7.minSize: 3.maxSize: 20});</script>
</html>
Copy the code

The code looks like this

The effect above is light snow, if you want to make the snow more, you can change the amount of snow as follows:

flakeCount: 100
Copy the code

In addition, you can speed up a little bit, snow is falling, such as:

FlakeCount: 150, minSpeed: 3Copy the code

You can also have many effects, such as changing snowflake styles, and you can experiment as much as you want.

It is said that girls like serious boys, when she sees it, she must be very touched!

Don’t thank me. I’m a good man

end

1. The code has been uploaded to personal Github

2. For those interested in Snowfall, read the source code

3. Original is not easy, welcome to like, collect, comment