The Falling Snow Effect


#65

Yeah, I was thinking of making them a light blue. I copied all that but at the very beginning it just says Parsing error: Unexpected token < and nothing displays :frowning: That’s the same issue I was having before, even when I tried following someone else’s step by step guide on how they did a similar snowflake animation.


#66

Do you have a link to the page with the error? I’d like to take a look at it in that errored state.

Edit:
I just tried the script on this site’s home page, and copy/pasting seems to work. Let’s figure out what is going on in the Wix one.


#67

I don’t think I can… I think it’s only accessible by logging onto my account and going into the web editor, which keeps any changes only visible to me until I publish the live version which the public can see.
I think Wix just uses a different way of coding, maybe? I tried Googling the parsing error thing and the only response was to make sure it was being placed in a HTML component rather than the site code or page source. I’m not 100% sure what that means. I’ve tried to create a snowflakeContainer box but it doesn’t give me an option to place separate coding for that. I’m about to just have a simple gif running in the background instead lol


#68

Wix may disallow custom HTML and JS outside of a small “iframed” container for security reasons. I am not too familiar with Wix’s setup to know more. I did a quick google search, and I wasn’t able to find anything that seemed to help :frowning:

Edit:
For example, what is shown here may have the snow effect work only inside this small rectangular region and not throughout your entire page.


#69

That’s alright, I appreciate your input anyway ^^ I really should pick up a web dev class or something so I know how to troubleshoot this kinda thing a little better.

Edit: Wait, that actually worked :open_mouth: But the snowflakes are only falling along the top.


#70

It seems to be an iframe (for security reasons), so you can’t actually have the code interact with the larger page or even draw anything outside of its boundaries :frowning:


#71

Love the snow effect.
I have it on a page now and it works great.
Can I change something in the code that will allow the page to be blank when you first arrive and then the snow begins falling immediately from the top?
Thank you for your thoughts.
Snow.


#72

I am not in front of my computer to check, but try changing this line:

var initialYPos = getPosition(50, browserHeight);

This code is responsible for placing the snowflakes vertically on the page. To have it start from outside your viewable area, try this:

var initialYPos = getPosition(-50, -1 * browserHeight);

Let me know if this fixes it :slight_smile:

Thanks,
Kirupa


#73

Thank you so much.
It works perfect.
Is there a way to change the snow flake to a .jpg pic?


#74

Absolutely! What your snowflake looks like is controlled by this HTML:

<div id="snowflakeContainer">
  <span class="snowflake"></span>
</div>

You can replace the span element with an img element that points to a JPG file. Just be sure to retain the class value of snowflake on whatever element you replace the span with. Also, you may need to update the .snowflake style rule as part of it.

Cheers,
Kirupa


#75

Thank you for your help.
I have yet to try the .jpg bit.
I sure that it will work if I so decide to change it.
You are a big help.
Snow