Snow Falling effect

Design help Custom code
1

Greetings,

happy holidays getting into the Christmas spirit early

I was wondering if any could help I’m looking to add a Snow Falling effect to my web page

:evergreen_tree: :gift:

2

Which script have you chosen? Can you do a simple Google search and select one you like most?

3

Hi I found this JavaScript here

this is the code

<script src="snowstorm.js"></script>

doesn’t seem to work for me?

This isn’t my favorite one this just looked the easiest

this one I like more

4

This is the minimum script required to run the second linked plugin.

Paste this in Site Settings > Custom Code > Footer Code, and publish

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $.getScript('https://cdn.rawgit.com/samliew/jqSnow/master/jquery.snow.js', function() {
    $.fn.snow();
  });
});
</script>

Edit: Forked original repo to add z-index option. GitHub - samliew/jqSnow: jQuery Snow Falling plugin

2 Likes
5

Sam… You Genius Thanks a lot

6

Merry Christmas and Happy Holidays!

1 Like
7

Is there anyway to adjust Z-index ? In my website the snow appears just over certain sections, but not over the menu bar or some other DIVs with a higher Z-index.

Thanks a lot in advance and merry Christmas everybody !!!

8

Just in case that anybody else is interested in adding snowflakes to their site. I found this workaround which does not involve javascript.

Simply copy and paste this code into the Footer Area in the Custom Code Section. Save and Publish. Done.

2 Likes
9

This works as expected over all sections of my site !

Thank you !!

Anyways, I would like to understand what is the problem with the other script and test the upper bulb area, which looks funny !

10

I forked the original repo and added a z-index option. See updated code above.

1 Like
11

Thank you !

I’m now trying that it just shows over the Hero section.

I’ve added a HTML Embedded component, with your code on it, but it appears over the whole page and not only over the hero section. I’ve activated the overflow setting but it doesn’t make any difference.

12

How are you doing it? You should always provide a public share link and published link to your project.