Snow falling in front of image


#1

Hi,

I am making an animated x-mas card and would like to add an effect on top of an image background. Is it possible to add falling snow? I guess that could be accomplished with the Physics engine, but that could become a bit too heavy.
So now I found this jquery example: https://github.com/loktar00/JQuery-Snowfall
I’m trying to get this to work inside of Hype, but no luck so far.

The desciption says:

Theres a few ways to call the snow you could do it the following way by directly passing the selector,

    snowFall.snow(document.getElementsByTagName("body"), {options});

or you could save the selector results to a variable, and then call it
    
    var elements = document.getElementsByClassName('yourclass');
    snowFall.snow(elements, {options});

If anyone can give me a few hints how to apply thhis code it would be awesome. Many thanks!


Confetti effect in hype
(Mark Hunte) #2

This does work.!

snowFall.snow(document.getElementsByTagName("body"),{ maxSpeed : 5, maxSize : 5} );

Did you include JQuery. ?

Also I used the snowfall.min.js instead of snowfall.jquery.min.js which I was getting errors.

This also works if you want your own image:

snowFall.snow(document.getElementsByTagName("body"), {image : "${resourcesFolderName}/snow.png", minSize: 10, maxSize:32});

(Kaare Bækgaard) #3

Find an animated gif with transparancy - there should be lots of them for free


(Mark Hunte) #4

Hi,

Can you please explain why you are suggesting this??


(Kaare Bækgaard) #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.


(Mark Hunte) #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


(Lucky) #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!


#10

Thanks or the advice @Luckyde ! Good to know.

Did you use this exact same snowfall.js ?


(Lucky) #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


#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)


(Hans-Gerd Claßen) #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.


(Hans-Gerd Claßen) #16

snowsnow.hype.zip (140.5 KB)

btw the height of your ‘enclosed’ was zero …


#17

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


(Lucky) #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!


#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)


#20

Here’s a nice one too…