XF 1.4 CSS3 Snow Animation

Jake Bunce

XenForo moderator
Staff member
#2
Note that this kind of CSS animation eats your CPU.

Admin CP -> Appearance -> Templates -> EXTRA.css

Use this code. That will add the snow background to your header which I think is most appropriate.

Rich (BB code):
#header
{
	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');
	-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;}
}
You should rehost those background images on your server.
 

Attachments

iamjudd

Active member
#3
Note that this kind of CSS animation eats your CPU.

Admin CP -> Appearance -> Templates -> EXTRA.css

Use this code. That will add the snow background to your header which I think is most appropriate.

Rich (BB code):
#header
{
    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');
    -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;}
}
You should rehost those background images on your server.
thank you thank you!
 
Top