Snow animation?

Ask for Help
1

Hey,
Any way to add snowflakes animation to glide?
trying to add some holiday spirit to the app :snowflake::santa:

references:

Thanks :slight_smile:

2

yes, add a rich component with a gif image or CSS for that effect, and set opacity to 0.2, and z-index to -1

3

How do I do that?
I created a Rich Text component and tried pasting some codes from the link I shared but nothing happend.
This is why I ask here :slight_smile:

4

your sample will not work in glide, there is no body to address, let me make you something similar :wink:

1 Like
5

Thank you very much! much appreciated…
Yes, it’s nothing crucial - but I thought it might be nice to spice it up for the holidays, and maybe others can use it too

I hope I will be able to learn from your code so that I will be able to do stuff like this myself in the future :pray:

6

give me few minutes, i have a customer call

1 Like
7

I’m back, sorry for the delay, Here is your code… Happy Holidays!

<div class="snow"  target="_blank">
<img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/wZj1I0tsGWmQvEZOs0gh/pub/9B13dgMIoL4vXUP4a8qE.gif">
</div>

<pre><span><style>
    body{ margin: 0; padding: 0; }
    .snow { width: 100% ;
    height:100% ;
    position: fixed ;
    top:0;
    left:0%;
    opacity: 0.3;
    z-index:1;
    pointer-events: none;
    }
    .snow img { width: 100% ;
    height:100% ;
    object-fit: cover ;
    }
5 Likes
8

AMAZING!
THANK YOU VERY MUCH!

Wishing you a truly wonderful holiday season filled with peace and love! :christmas_tree::santa:

3 Likes
9

thank you! You too.

10

I edited the z-index to 1, so it will blend better with elements with nontransparent backgrounds… but if you need them to stand out, keep it at -1

1 Like
11

Way to go UZO! And thanks for the thought @Thoughts!

I love it!

2 Likes
12

Really Santa Uzo!!! Thankyou very mutch!

1 Like
13

Happy Holidays to You!

1 Like
14

Thanks for the help Uzo, been looking for something similar for a while