make it snow.js?

Ask the community
,
1

hi there,
i got a simple snow javascript code from https://codepen.io/massiebn/pen/vmkwJ
i wanted ti implent it into my wix page:
but got this error message:
ReferenceError: window is not definedsnow1.jsLine 676

i understand javascript access to the website is limited for good reasons.

however, how do i get my snow?

2

I got this from another member on here. simply put an HTML box and paste the code. Then resize the html box as big as you need.

/* customizable snowflake styling */ .snowflake { color: #fff; font-size: 1em; font-family: Arial; text-shadow: 0 0 1px #000; } @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.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}
❄
❅
❆
❄
❅
❆
❄
❅
❆
❄
3

You might be able to get your code to work the same way, try putting in an html box and see if that works for you also

4

Its working great - thank you!

ofc you need to move the html box into the BACKGROUND otherwise the usercannot click anything, but basicly it works <3

5

Hi how do you remove the html code so your website can go back to normal?

6

If you use the embed box for HTML code, just remove that box and your site will be back to normal. Because the embed box will not impact to your source code of the webpage (dev mode), it like an object put overlap on your the webpage as a layer.

7

where can I find the html box option?

8

From the tool bar left-hand side, click Add>Embed> then choose the first one. After a box appear on the page then click edit code and put your html code.

9

@thanajobs any idea how i could increase that amount of snowflakes?

10

I’m not sure is it working or not. If you use the above HTML code, try to insert the same code continue from the last command. Just change “(9)” to 10, 11, 12, 13, … and change the position “x%” and delay “xs”as you wish.

.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(11){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(12){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(13){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}

For the above example, you have added 4 more snowflakes, you also need to add more objects the same amount. And you can change the style of those snowflakes.

❄
❅
❆
❄

Try to do, I cannot confirm it is working or not. Good luck. :slight_smile:

11

Hello, this is amazing. Do you know how to add flowing hearts or hearts falling down like the snowflakes? Thank You :slight_smile:

12

Hello, this is amazing. Do you know how to add flowing hearts or hearts falling down like the snowflakes? Thank You :slight_smile:

13

I can’t click on anything in my website because of that html box

What should I do?

14

Click on it, then click (Ctrl + Shift + Down Arrow Key).

Also, this is an old post and will be closed, please open up a new thread if you have more questions or concerns.