Xmas time! Snow animation header 2017-12-05

Compatible XF Versions

Time for xmas! Change you're header to a nice one with snow animation.
Example:

Live demo: kodi-forum.nl

Download the images and place them in the folder images/snow.
The simplest way to create this header is with a advertisement (Sounds funny i know)

First you have to create a new (or edit a existing) advertisement. (/admin.php?advertising/)
I chose "Container breadcrumb (top): Above".
Add the following to the HTML:

Code:

<style>

#header{

	background-image: url('/images/snow/s1.png'), url('/images/snow/s2.png'), url('/images/snow/s3.png');

	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>

You can also place the css in a .less file but this is the simplest way for beginners.

Reactions: Pokschubin, BySylexhydra, RaMaZoTy and 3 others

xF2 Template Modification Xmas time! Snow animation header 2017-12-05

More resources from AnimeHaxor

Share this resource