XF 1.4 CSS3 Snow Animation

[iamjudd]

Was hoping someone could possibly help me with the best way to implement this:
http://codepen.io/NickyCDK/pen/AIonk/

thanks!

 

[Jake Bunce]

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.

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

 

[iamjudd]

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.

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

 

[JamesBrown]

Thanks. Works a treat http://www.motorhomefun.co.uk/forum/

 

[Puntocom]

Very nice! thank you.

 

[Sheratan]

Question. Which one is better for snow effect, CSS3 or just JS?

 

[Jake Bunce]

Question. Which one is better for snow effect, CSS3 or just JS?

They are roughly equivalent. Both will consume a lot of CPU.

 

[Andy.N]

Thanks. Works a treat http://www.motorhomefun.co.uk/forum/

You have 2 Members online now blocks shown up