# The Falling Snow Effect

**URL:** <https://forum.kirupa.com/t/the-falling-snow-effect/352137>\
**Category:** web dev\
**Created:** [November 23, 2014, 12:48am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137 "2014-11-23T00:48:23Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 18, 2017, 3:34am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/45 "2017-12-18T03:34:32Z")

</div>

Does your browser’s developer tools console show any error? If you aren’t familiar with the console, this will help: [https://www.kirupa.com/html5/console.htm](https://www.kirupa.com/html5/console.htm) 🙂

---

<div class="post-metadata">

**Author:** ![gabriella](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gabriella/32/8873_2.png) [@gabriella](https://forum.kirupa.com/u/gabriella)\
**Post date:** [December 18, 2017, 9:59am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/46 "2017-12-18T09:59:28Z")

</div>

Thanks for the great tutorial on snowflakes! I love the depth of your explanation… not many people go through the trouble… you’re the bomb!  
-g.

---

<div class="post-metadata">

**Author:** ![TheCanadian](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@TheCanadian](https://forum.kirupa.com/u/TheCanadian)\
**Post date:** [December 20, 2017, 8:02am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/47 "2017-12-20T08:02:18Z")

</div>

Help plz. I’ve got like 25 cm of snow now and I don’t know how to make it stop. I tried stop(); but it didn’t work. Please tell me how to stop falling snow effect. Urgent!

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [December 20, 2017, 12:45pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/48 "2017-12-20T12:45:00Z")

</div>

Sorry, I don’t know the metric system. Can’t help 😣

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [December 20, 2017, 8:05pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/49 "2017-12-20T20:05:03Z")

</div>

Did you try `getTimer()`? It should stop all snow.

---

<div class="post-metadata">

**Author:** ![TheCanadian](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@TheCanadian](https://forum.kirupa.com/u/TheCanadian)\
**Post date:** [December 21, 2017, 5:15am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/50 "2017-12-21T05:15:24Z")

</div>

NO GETTIMER DOESNT WORK AND I TRIED TWEENMAX TOO BUT IT DIDNT WORK EITHER.

PS: 25 cm is about nine sixtyfourths of a fathom, if that helps you imperial-minded folks.

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [December 21, 2017, 5:41am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/51 "2017-12-21T05:41:49Z")

</div>

I’m personally more concerned with the falling snow _affect_ rather than the falling snow _effect_. How can we replicate it in code? Kirupa’s tutorial doesn’t work at all for me in terms of affect in Mosaic 3.

---

<div class="post-metadata">

**Author:** ![Bernard\_Bel](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bernard_bel/32/8937_2.png) [@Bernard\_Bel](https://forum.kirupa.com/u/Bernard_Bel)\
**Post date:** [January 10, 2018, 6:35pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/52 "2018-01-10T18:35:20Z")

</div>

Hello !

This is an amazing piece of code and an equally amazingly clear presentation!

I am not conversant with Javascript. I would like to modify the call of script “fallingsnow\_v6.js” to pass _numberOfSnowflakes_ as an argument (or global variable?)… How can I do it?

The aim of this will be to program more or less snow falls at different times of the day and the year, including no snow whenever _numberOfSnowflakes_ = 0.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [January 10, 2018, 10:06pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/53 "2018-01-10T22:06:27Z")

</div>

@Bernard_Bel you can set `numberOfSnowflakes` to whatever you want in your own copy of `fallingsnow_v6.js`. This can be a different number, or something you calculate from the time of day or year. This, for example, uses a sine wave to make it more snowy in the middle of January and less snowy in at the start or end of the month - assuming January is the only month it snows 😉

```auto
var numberOfSnowflakes = getNumberOfFlakes(); // function defined below:

function getNumberOfFlakes() {

  var now = new Date(); // today's date
  var month = now.getMonth(); // months are 0-11 where 0 is January

  if (month === 0) {
    var day = now.getDate(); // day in the month
    var percentInMonth = day/31; // based on 31 days in January
    var curve = Math.sin(percentInMonth * Math.PI);
    var maxFlakes = 50;
    return Math.round(maxFlakes * curve); // 0-50 flakes
  }

  // it is not january, so no snowflakes
  return 0;
}

```

---

<div class="post-metadata">

**Author:** ![Bernard\_Bel](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bernard_bel/32/8937_2.png) [@Bernard\_Bel](https://forum.kirupa.com/u/Bernard_Bel)\
**Post date:** [January 11, 2018, 7:18am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/54 "2018-01-11T07:18:53Z")

</div>

This is fine. However I was hoping to compute _numberOfSnowflakes_ in the PHP code and pass on its value to “fallingsnow\_v6.js”.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [January 11, 2018, 2:09pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/55 "2018-01-11T14:09:53Z")

</div>

In that case, remove the variable from the js file and echo a computed php value in an in-line script tag before it. Something like

```
<script>var numberOfSnowflakes = <?= $myFlakeCount ?>;</script>
<script script="fallingsnow_v6.js"></script>
```

---

<div class="post-metadata">

**Author:** ![Bernard\_Bel](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bernard_bel/32/8937_2.png) [@Bernard\_Bel](https://forum.kirupa.com/u/Bernard_Bel)\
**Post date:** [January 11, 2018, 7:35pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/56 "2018-01-11T19:35:28Z")

</div>

It works perfectly. Thank you!

---

<div class="post-metadata">

**Author:** ![Nischal\_Ghimire](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/nischal_ghimire/32/9280_2.png) [@Nischal\_Ghimire](https://forum.kirupa.com/u/Nischal_Ghimire)\
**Post date:** [September 4, 2018, 8:33am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/57 "2018-09-04T08:33:38Z")

</div>

Isn’t that is for a single value . But I wish to use multiple unique values in one go . How can I do that ?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 4, 2018, 11:26am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/58 "2018-09-04T11:26:27Z")

</div>

You would do something similar for each variable. If you’re dealing with many variables, a loop to generate the JavaScript declarations can be used.

---

<div class="post-metadata">

**Author:** ![brofox86](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/brofox86/32/9405_2.png) [@brofox86](https://forum.kirupa.com/u/brofox86)\
**Post date:** [December 20, 2018, 5:28pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/59 "2018-12-20T17:28:29Z")

</div>

I’ve added **pointer-events: none** to snowflakes to keep correct behaviour of  
some buttons when they overlap it.

```
.snowflake {
  ...
  pointer-events: none;
}
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 20, 2018, 6:10pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/60 "2018-12-20T18:10:08Z")

</div>

That’s a good tip! I need to revise this tutorial to simplify the code, so I’ll be sure to throw this into the changes 🙂

---

<div class="post-metadata">

**Author:** ![gloralyg](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@gloralyg](https://forum.kirupa.com/u/gloralyg)\
**Post date:** [December 21, 2018, 12:00am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/61 "2018-12-21T00:00:43Z")

</div>

Hi, I’m trying to add this falling snowflake effect to my seasonal homepage. I use Wix to build my site but when I enter the code into the page source, nothing happens. I don’t really know how to code lol… I’ve just followed tutorials or used trial and error methods to figure out what I have so far. Do you happen to know how to get it to work on a Wix site?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 21, 2018, 3:18am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/62 "2018-12-21T03:18:15Z")

</div>

Can you post a link to your Wix page? It’s hard to know for sure what may be going wrong 🙂

---

<div class="post-metadata">

**Author:** ![gloralyg](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@gloralyg](https://forum.kirupa.com/u/gloralyg)\
**Post date:** [December 21, 2018, 3:31am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/63 "2018-12-21T03:31:40Z")

</div>

[https://gloralyg.wixsite.com/gloriousdesigns](https://gloralyg.wixsite.com/gloriousdesigns)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 21, 2018, 3:37am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/64 "2018-12-21T03:37:04Z")

</div>

Where you can paste your own HTML, can you copy/paste the following in:

```
<style>
    #snowflakeContainer {
      position: absolute;
      left: 0px;
      top: 0px;
    }

    .snowflake {
      position: fixed;
      background-color: #FFFFFF;
      user-select: none;
      z-index: 1000;
      pointer-events: none;
      border-radius: 50%;
      width: 10px;
      height: 10px;
    }
  </style>
  <div id="snowflakeContainer">
    <span class="snowflake"></span>
  </div>

  <script>
    // Array to store our Snowflake objects
    var snowflakes = [];

    // Global variables to store our browser's window size
    var browserWidth;
    var browserHeight;

    // Specify the number of snowflakes you want visible
    var numberOfSnowflakes = 50;

    // Flag to reset the position of the snowflakes
    var resetPosition = false;

    //
    // It all starts here...
    //
    function setup() {
      window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
      window.addEventListener("resize", setResetFlag, false);
    }
    setup();

    //
    // Constructor for our Snowflake object
    //
    function Snowflake(element, speed, xPos, yPos) {
      // set initial snowflake properties
      this.element = element;
      this.speed = speed;
      this.xPos = xPos;
      this.yPos = yPos;

      // declare variables used for snowflake's motion
      this.counter = 0;
      this.sign = Math.random() < 0.5 ? 1 : -1;

      // setting an initial opacity and size for our snowflake
      this.element.style.opacity = .1 + Math.random();
      this.element.style.fontSize = 12 + Math.random() * 50 + "px";
    }

    //
    // The function responsible for actually moving our snowflake
    //
    Snowflake.prototype.update = function () {

      // using some trigonometry to determine our x and y position
      this.counter += this.speed / 5000;
      this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40;
      this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;

      // setting our snowflake's position
      setTranslate(Math.round(this.xPos), Math.round(this.yPos), this.element);

      // if snowflake goes below the browser window, move it back to the top
      if (this.yPos > browserHeight) {
        this.yPos = -50;
      }
    }

    //
    // A performant way to set your snowflake's position
    //
    function setTranslate(xPos, yPos, el) {
      el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
    }

    //
    // The function responsible for creating the snowflake
    //
    function generateSnowflakes() {

      // get our snowflake element from the DOM and store it
      var originalSnowflake = document.querySelector(".snowflake");

      // access our snowflake element's parent container
      var snowflakeContainer = originalSnowflake.parentNode;

      // get our browser's size
      browserWidth = document.documentElement.clientWidth;
      browserHeight = document.documentElement.clientHeight;

      // create each individual snowflake
      for (var i = 0; i < numberOfSnowflakes; i++) {

        // clone our original snowflake and add it to snowflakeContainer
        var snowflakeClone = originalSnowflake.cloneNode(true);
        snowflakeContainer.appendChild(snowflakeClone);

        // set our snowflake's initial position and related properties
        var initialXPos = getPosition(50, browserWidth);
        var initialYPos = getPosition(50, browserHeight);
        var speed = 5 + Math.random() * 40;

        // create our Snowflake object
        var snowflakeObject = new Snowflake(snowflakeClone,
          speed,
          initialXPos,
          initialYPos);
        snowflakes.push(snowflakeObject);
      }

      // remove the original snowflake because we no longer need it visible
      snowflakeContainer.removeChild(originalSnowflake);

      // call the moveSnowflakes function every 30 milliseconds
      moveSnowflakes();
    }

    //
    // Responsible for moving each snowflake by calling its update function
    //
    function moveSnowflakes() {
      for (var i = 0; i < snowflakes.length; i++) {
        var snowflake = snowflakes[i];
        snowflake.update();
      }

      // Reset the position of all the snowflakes to a new value
      if (resetPosition) {
        browserWidth = document.documentElement.clientWidth;
        browserHeight = document.documentElement.clientHeight;

        for (var i = 0; i < snowflakes.length; i++) {
          var snowflake = snowflakes[i];

          snowflake.xPos = getPosition(50, browserWidth);
          snowflake.yPos = getPosition(50, browserHeight);
        }

        resetPosition = false;
      }

      requestAnimationFrame(moveSnowflakes);
    }

    //
    // This function returns a number between (maximum - offset) and (maximum + offset)
    //
    function getPosition(offset, size) {
      return Math.round(-1 * offset + Math.random() * (size + 2 * offset));
    }

    //
    // Trigger a reset of all the snowflakes' positions
    //
    function setResetFlag(e) {
      resetPosition = true;
    }
  </script>

```

This contains everything you need to get the snow animation up and running. The one thing you may want to do is change the color of the snow to be something other than white since your site also has a white background 🙂

[Previous page](https://forum.kirupa.com/t/the-falling-snow-effect/352137.md?page=2)

[Next page](https://forum.kirupa.com/t/the-falling-snow-effect/352137.md?page=4)