Streaming live at 10am (PST)

Animated Snowflakes as Background / Overlay


#1

Hi Members,

i recently came around this nice little css animation on codepen. https://codepen.io/NickyCDK/pen/AIonk
As i dont have any clue how to use code within webflow, i wonder if anybody knows how to implement such code elements on a webflow site.

Hope you can help me.


Here is my public share link: LINK
(how to access public share link)


#2

Just in case that anybody else is interested in adding snowflakes to their site. I want this workaround which does not involve javascript.

http://pajasevi.github.io/CSSnowflakes/

Simply copy and paste this code into the Footer Area in the Custom Code Section. Save and Publish. Done.


#3
  1. go to your page custom code and in the HEAD box paste the following:

<style>
body { background-color:#333; }
#snow{
background: none;
font-family: Androgyne;
background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:1;
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}	
</style>
  1. select the body element and give it the class "snow". Publish and test.

#4

Wow ty! I have a client that was looking for something like this exactly!


#5

Hi Vincent,

thank you for your answer. I tried it your way, as it seems more elegant than the other way, but unfortunately it did not work so far. I tried it in the global site custom code section as well as in the specific page custom code setting. Both ways did not work. Do you have any idea?

Thank you in advance.


#6

Oh yes sorry.

I told you to add a CLASS but it's an ID.

select the body, select the settings tab, in unique ID type "snow"


#7

When i select the body element in the navigator i only can if it custom attributes but dont have the option to give an ID. Shall i put everything in a div and give the div the ID: snow?


#8

YES! :smiley:

I need to type more text



#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.