Hi Members,
i recently came around this nice little css animation on codepen. https://codepen.io/NickyCDK/pen/AIonk
Hope you can help me.
Here is my public share link: LINK how to access public share link )
Just in case that anybody else is interested in adding snowflakes to their site. I want this workaround which does not involve javascript.
Simply copy and paste this code into the Footer Area in the Custom Code Section. Save and Publish. Done.
2 Likes
vincent
November 7, 2016, 2:25pm
3
go to your page custom code and in the HEAD box paste the following:
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;}
}
select the body element and give it the class “snow”. Publish and test.
seank
November 7, 2016, 5:19pm
4
Wow ty! I have a client that was looking for something like this exactly!
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.
vincent
November 7, 2016, 8:11pm
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”
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?
system
January 8, 2017, 6:47am
9
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
