Snow falling in front of image

Using JavaScript with Hype
4

Hi,

Can you please explain why you are suggesting this??

5

I may have misunderstood your intention, but an animated gif with transparency will be transparent everywhere except for the falling snow. So just by placing it on top of any scene, you will get falling snow effect. It is perhaps a more convenient method.

6

Not sure I agree as you would have to hunt for the right rez. image so you do not have to stretch it to fit the scene size.

But that does not mean it's not a possible option :smiley:

7

Thanks for the help guys!

yes an animated gif layer could be possible, but is indeed not very flexible.

I’ll see if I get this snowfall.js working now. Not very much experience with jquery in Hype so it’s a bit of a search for me.

8

yes, I got it working now!

Thanks @MarkHunte

9

Note with that jquery snow effect we tested it on tablets and it lagged and crashed some models of tablets, make sure you stop the snow at some point!

1 Like
10

Thanks or the advice @Luckyde ! Good to know.

Did you use this exact same snowfall.js ?

11

Yep I did, if you find others let me know! But yeah we used that for car ads with falling snow and after 6 seconds the mobile browser started to chug

3 Likes
12

JS / JQ is best, but one can certainly loop a PNG on a separate channel. I did a four seasons animation a while back that doubled the animation - smaller and slower on one channel for the background, with the foreground version being larger, faster and blurred. It provided depth plus it emphasized the midground.

13

This is going back over a year, but using suggestions here, I was able to implement snowfall.js into this short test. The problem is that I can’t get it to target any other element other than body. I don’t want the snow over the whole page, just within the enclosed div. Changing to script to:

snowFall.snow(document.getElementsByClass(".enclosed"),{round : true, flakeCount : 400, minSpeed : 1, maxSpeed : 6, minSize : 1, maxSize : 5} );

DOES NOT DO THE TRICK. Any suggestions?

SnowGlobe.zip (177.4 KB)

14

has to be

document.getElementsByClassName("enclosed")[0]

so this'll be the first element with class enclosed

15

Sorry, left off Name in my post, but yes, have done that. Still does not work. Did you try with the attached example? Can’t get it to target anything other than body.

16

snowsnow.hype.zip (140.5 KB)

btw the height of your ‘enclosed’ was zero …

2 Likes
17

Oh my god. So much time spent trying to figure it out, I overlooked the obvious. Thank you soooo much!

18

hey could you by chance link to the library you used? i want to test it on tablets and hopefully use it if it doesn’t lag
Thanks!

1 Like
19

Hi. Sorry. Just seeing this. I’ve attached the library and the hype file in its current state.

JQuery-Snowfall-master.zip (642.1 KB)

opening.zip (179.4 KB)

1 Like
20

Here's a nice one too...

21

Hey there. Was going to use this now but have a question. How come I cant change color in snowfall.min.js? I can change from #FFFFFF but the animation does not change.

Thanks!

22

There's a method makeItSnow() in the Hype document that is modifying the flake color.

  1. Go to the Resources pane in the scene editor tab
  2. Select makeItSnow()
  3. Click Edit Source…
  4. Change the #FFFFFF to something else there
1 Like
23

Thank you Jonathan. So simple and fast. I was on a deadline so ended up using this instead.

2 Likes