Home > Article > Web Front-end > How to make snowflakes fall using JQuery

How to make snowflakes fall using JQuery

亚连Original: 2018-06-23 14:56:111431browse

This article mainly tells you how to use JS and JQuery to achieve the animation effect of falling snowflakes. Friends in need can save it.

Many friends need to use the effect of falling snowflakes when making special effects web pages. Here we have compiled for you how to achieve this effect using JS and JQuery codes.

Let’s first take a look at the snowflake effect that needs to be implemented:

The snowflake falling effect implemented this time is very simple, mainly for practicing JavaScript. timers, setTimeout and setInterval.

Explanation

setTimeout()

The setTimeout function is used to specify the number of milliseconds after which a function or a certain piece of code will be executed. It returns an integer representing the timer number, which can be used to cancel the timer later.

var timerId = setTimeout(func|code, delay)

In the above code, the setTimeout function accepts two parameters. The first parameter func|code is the name of the function or a piece of code to be delayed, and the second parameter delay is the number of milliseconds to delay execution.

setInterval()

The usage of the setInterval function is exactly the same as setTimeout. The only difference is that setInterval specifies that a task should be executed every once in a while, which is an unlimited number of scheduled executions.

clearTimeout(), clearInterval()

The setTimeout and setInterval functions both return an integer value representing the counter number. Pass the integer into the clearTimeout and clearInterval functions to cancel the corresponding timing. device.

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);

Note:

setTimeout and setInterval must wait until the synchronization tasks of the current script and the existing events in the "task queue" are all processed before the task specified by setTimeout is executed.

Let’s continue to talk about achieving the effect of falling snowflakes

Mainly the following 4 steps:

1. Define a snowflake template;
2. Set the first timer , a periodic timer that generates a snowflake every once in a while;
3. Set the second timer, a one-time timer. When the first timer generates snowflakes and renders them on the page, modify the snowflakes. style to make the snowflakes move;
4. Set the third timer. When the snowflakes fall, delete the snowflakes.

The above is the implementation idea. The specific code is written below. The following code is the JS native code. Finally, the JQuery implementation code will be attached. The ideas are the same.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      background-color: #000;
      /*防止出现向下滚动条*/
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script>
    function snow() {
      //  1、定义一片雪花模板
      var flake = document.createElement(&#39;p&#39;);
      // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
      flake.innerHTML = &#39;❆&#39;;
      flake.style.cssText = &#39;position:absolute;color:#fff;&#39;;

      //获取页面的高度 相当于雪花下落结束时Y轴的位置
      var documentHieght = window.innerHeight;
      //获取页面的宽度，利用这个数来算出，雪花开始时left的值
      var documentWidth = window.innerWidth;

      //定义生成一片雪花的毫秒数
      var millisec = 100;
      //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
      setInterval(function() { //页面加载之后，定时器就开始工作
        //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
        var startLeft = Math.random() * documentWidth;

        //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
        var endLeft = Math.random() * documentWidth;

        //随机生成雪花大小
        var flakeSize = 5 + 20 * Math.random();

        //随机生成雪花下落持续时间
        var durationTime = 4000 + 7000 * Math.random();

        //随机生成雪花下落 开始 时的透明度
        var startOpacity = 0.7 + 0.3 * Math.random();

        //随机生成雪花下落 结束 时的透明度
        var endOpacity = 0.2 + 0.2 * Math.random();

        //克隆一个雪花模板
        var cloneFlake = flake.cloneNode(true);

        //第一次修改样式，定义克隆出来的雪花的样式
        cloneFlake.style.cssText += `
            left: ${startLeft}px;
            opacity: ${startOpacity};
            font-size:${flakeSize}px;
            top:-25px;
               transition:${durationTime}ms;
           `;

        //拼接到页面中
        document.body.appendChild(cloneFlake);

        //设置第二个定时器，一次性定时器，
        //当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
        setTimeout(function() {
          //第二次修改样式
          cloneFlake.style.cssText += `
                left: ${endLeft}px;
                top:${documentHieght}px;
                opacity:${endOpacity};
              `;

          //4、设置第三个定时器，当雪花落下后，删除雪花。
          setTimeout(function() {
            cloneFlake.remove();
          }, durationTime);
        }, 0);

      }, millisec);
    }
    snow();
  </script>
</body>
</html>

Note:

Because the event added by the timer will be executed in the next Event Loop, the function of the second timer is to splice the generated snowflakes into the page and render them first. Finally, modify its style so that it can move. Without this timer, the browser will execute all the JS code before rendering the page. In this case, the later styles will directly overwrite the previous styles. The snowflake cannot move. This has something to do with the browser's thread.

To put it simply, it means that using this timer, the code for modifying the style twice can be executed separately. You can render the first modified style first, and then make the second modification, and the snowflake will be It will move.

JQuery version

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      background-color: #000;
      /*防止出现向下滚动条*/
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script>
    function snow() {
      //1、定义一片雪花模板
      var flake = $("<p>").css({
        "position": "absolute",
        "color": "#fff"
      }).html("❄");

      //获取页面的宽度，利用这个数来算出，雪花开始时left的值
      var documentWidth = $(document).width();

      //获取页面的高度 相当于雪花下落结束时Y轴的位置
      var documentHieght = $(document).height();

      //定义生成一片雪花的毫秒数
      var millisec = 100;
      //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
      setInterval(function() {
        //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
        var startLeft = Math.random() * documentWidth;

        //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
        var endLeft = Math.random() * documentWidth;

        //随机生成雪花大小
        var flakeSize = 5 + 20 * Math.random();

        //随机生成雪花下落持续时间
        var durationTime = 4000 + 7000 * Math.random();

        //随机生成雪花下落 开始 时的透明度
        var startOpacity = 0.7 + 0.3 * Math.random();

        //随机生成雪花下落 结束 时的透明度
        var endOpacity = 0.2 + 0.2 * Math.random();

        //3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中
        flake.clone().appendTo($("body")).css({
          "left": startLeft,
          "opacity": startOpacity,
          "font-size": flakeSize,
          "top": "-25px",
        }).animate({ //执行动画
          "left": endLeft,
          "opacity": endOpacity,
          "top": documentHieght
        }, durationTime, function() {
          //4、当雪花落下后，删除雪花。
          $(this).remove(); 
        });
      }, millisec);
    };
    snow();
  </script>
</body>
</html>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use routing parameters to pass in vue

How to implement a drop-down menu in jQuery

How to use the swiper component in the WeChat applet

How to use the Vue.use() component through the global method

The above is the detailed content of How to make snowflakes fall using JQuery. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery Event 线程 JS 事件微信小程序

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to publish vue components to npmNext article：How to publish vue components to npm

See more

How to make snowflakes fall using JQuery

Related articles