Falling snowflakes on webpage

Hello,

 

'Tis the season ! Is there anyway I could add falling snowflakes on my webpage?

Thanks a million

Add this html code to a code block on a page or to settings advanced code injection header:

<style>
	/* customizable snowflake styling */
	.snowflake {
	color: #fff;
	font-size: 1em;
	font-family: Arial, sans-serif;
	text-shadow: 0 0 5px #000;
	}
	@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
	</style>
	<div class="snowflakes" aria-hidden="true">
	<div class="snowflake">
	❅
	</div>
	<div class="snowflake">
	❆
	</div>
	<div class="snowflake">
	❅
	</div>
	<div class="snowflake">
	❆
	</div>
	<div class="snowflake">
	❅
	</div>
	<div class="snowflake">
	❆
	</div>
	<div class="snowflake">
	❅
	</div>
	<div class="snowflake">
	❆
	</div>
	<div class="snowflake">
	❅
	</div>
	<div class="snowflake">
	❆
	</div>
	<div class="snowflake">
	❅
	</div>
	<div class="snowflake">
	❆
	</div>
	</div>

Awesome, thank you! 

You might need to add another  <style>    at the end of the code I posted. 

I found his code to work better on my 7.0 site, you add it to a page in advanced header, if you add it to an index page header (like in Avenue) it shows up in all pages viewed from that index. You can adjust the snowflakes in the CSS section copy the code starting with <style> :

.snowflake {
  position: fixed;
  background-color: #CCC;
  user-select: none;
  z-index: 1000;
  pointer-events: none;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

https://myrandomviews.com/williamsburg-christmas/

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

  .snowflake {
    position: fixed;
    background-color: #CCC;
    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;

  // Handle accessibility
  var enableAnimations = false;
  var reduceMotionQuery = matchMedia("(prefers-reduced-motion)");

  // Handle animation accessibility preferences 
  function setAccessibilityState() {
    if (reduceMotionQuery.matches) {
      enableAnimations = false;
    } else { 
      enableAnimations = true;
    }
  }
  setAccessibilityState();

  reduceMotionQuery.addListener(setAccessibilityState);

  //
  // It all starts here...
  //
  function setup() {
    if (enableAnimations) {
      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;
    this.scale = 1;

    // 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()) / 3;
  }

  //
  // 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;
    this.scale = .5 + Math.abs(10 * Math.cos(this.counter) / 20);

    // setting our snowflake's position
    setTransform(Math.round(this.xPos), Math.round(this.yPos), this.scale, 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 and size
  //
  function setTransform(xPos, yPos, scale, el) {
    el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0) scale(${scale}, ${scale})`;
  }

  //
  // 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;
    snowflakeContainer.style.display = "block";

    // 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);

    moveSnowflakes();
  }

  //
  // Responsible for moving each snowflake by calling its update function
  //
  function moveSnowflakes() {

    if (enableAnimations) {
      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>

Edited December 5, 2020 by derricksrandomviews

Code to make images snow, using code block. 

<div class="snow" />
<style>
.editor-stage .snow {
  height:50px;
  background: #fff;
}
.snow{
  position:fixed;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  height:100vh;
  background: none;
  background-image: url('https://s3-eu-west-1.amazonaws.com/static-ressources/s1.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s2.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s3.png');
  z-index:100;
  -webkit-animation: snow 10s linear infinite;
  -moz-animation: snow 10s linear infinite;
  -ms-animation: snow 10s linear infinite;
  animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
</style>
<p>

On 12/5/2020 at 10:30 PM, derricksrandomviews said:

Code to make images snow, using code block. 

<div class="snow" />
<style>
.editor-stage .snow {
  height:50px;
  background: #fff;
}
.snow{
  position:fixed;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  height:100vh;
  background: none;
  background-image: url('https://s3-eu-west-1.amazonaws.com/static-ressources/s1.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s2.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s3.png');
  z-index:100;
  -webkit-animation: snow 10s linear infinite;
  -moz-animation: snow 10s linear infinite;
  -ms-animation: snow 10s linear infinite;
  animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
</style>
<p>

Hi Mr. @derricksrandomviews!
I really liked the format of this last code... But I am not able to inject it as a code block in the header in advanced settings. Could you help me? I would really like it to be the latter but in the header to stay on all pages of the site. 🙏

When using a code block you put it on the actual page not in the page settings  advanced header. Any page you want to snow, put a code block there. 

Edited December 11, 2020 by derricksrandomviews

3 minutes ago, derricksrandomviews said:

Ao usar um bloco de código, você o coloca na página real, não no cabeçalho avançado. Qualquer página que você deseja colocar um bloco de código lá. 

The snow effect does not stand out from a gallery block that I have as a banner for my site, it works across the page but at the top (which is where the visualization is most important) it is below this gallery block. That's why I wanted to inject it into the header, as the first option I gave... but I wanted this design that I posted last... 😔

I can put the code block in a header of any page, and the whole page snows. Don't need to use advanced code injection which needs  business plan to be available. . 

Edited December 11, 2020 by derricksrandomviews

On 11/12/2020 at 18:51, derricksrandomviews said:

Posso colocar o bloco de código em um cabeçalho de qualquer página e a página inteira neva. Não precisa usar injeção de código avançada, que precisa que o plano de negócios esteja disponível. . 

Hello @derricksrandomviews It's done, something simple kept me from getting it but I finally got it... Thanks for always being willing to help. 🙏

 

Might be nice for people to take a look at his falling snow. I have one design of snow (code} running on my landing page and another effect on my blog page. 

my random views derrick Lee parker 

 

Edited December 7, 2022 by derricksrandomviews

This is excellent and I've successfully used it. However, how do I get rid of the red background....it seems to show up as a narrow red banner on mobile devices?

Does anyone know how to adapt this code to replace the snowflakes with 'hearts' for Valentine's Day or 'eggs' for Easter ? 

From the last code snippet I posted. To make hearts or eggs fall you would need three new image files, lines in the code to replace these three lines. if you copy and paste the url starting at https and ending at png, in your browser address bar, you will see one of them. I think you could get by with one, these three were images of different sized "flakes".

 url('https://s3-eu-west-1.amazonaws.com/static-ressources/s1.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s2.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s3.png');

or you can use this code for hearts. The behavoir is a bit different for 7.1 and 7.0 sites.  Place in custom css for the whole site.

body:before {
content: '';
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url(https://divi.space/wp-content/uploads/2019/02/hearts.png);
animation: falling-hearts 18s linear infinite;
}
@keyframes falling-hearts {
0% {background-position: 0% 30%;}
}

@-moz-keyframes falling-hearts {
0% {background-position: 0% 30%;}
}

@-webkit-keyframes falling-hearts {
0% {background-position: 0% 30%;}
}

Edited December 7, 2022 by derricksrandomviews

Thanks so much.  I'll try that. 

 

Can't thank you enough. Working beautifully. Really appreciate it.

Ger In Dublin Ireland

On 12/5/2020 at 11:30 PM, derricksrandomviews said:

Code to make images snow, using code block. 

<div class="snow" />
<style>
.editor-stage .snow {
  height:50px;
  background: #fff;
}
.snow{
  position:fixed;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  height:100vh;
  background: none;
  background-image: url('https://s3-eu-west-1.amazonaws.com/static-ressources/s1.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s2.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s3.png');
  z-index:100;
  -webkit-animation: snow 10s linear infinite;
  -moz-animation: snow 10s linear infinite;
  -ms-animation: snow 10s linear infinite;
  animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
</style>
<p>

Hey, thanks for your great posts.

I'm an absolute code noob and implemented your code on my site.

Unfortunately, the animation ends very abruptly. Is there a way to make the animation smoother? So you have an infinite loop and no hard end of the animation.

Many thanks in advance,
Kind regards
 

My page:
https://www.hairmanufacture.online/

I love this code, derricksrandomviews - thank you for bringing Christmas spirit to my webshop 🙂 www.bettybobbert.com 

Hi there!! I just really want to thank the OP for posting this because it worked like a charm for me at Christmas with the snowflakes. For Valentines Day I would like the falling hearts but I can't seem to figure it out like I did for the snowflakes... I wasn't sure what/where to copy and paste and which code. 

Any help would be greatly appreciated and I will totally mail you cookies for your help! I am at smcakes@yahoo.com if you want to send your address. I really appreciate you!!

Hey there! these codes and the snowflakes look amazing! So I have a curly hair salon website that I'm creating and I sort of wanted a really light grey curly hair strand to run throughout the page in such a way that it appears as you keep scrolling down. Would that be possible and can someone help me with that? I'd also like it to be compatible with the mobile and tab views.

45 minutes ago, Emmalou025 said:

now i cant remove it?

@Emmalou025 There were no snowflakes when I looked at the site a moment ago. Perhaps you removed the code, or they are on a specific page?

@paul2009i did thank you! feel a bit silly i just had to delete all the blocks as i had a few set up all blank for some reason 

13 hours ago, Emmalou025 said:

feel a bit silly

There's no need to feel silly! This is a safe space to learn 🙂.