- Compatible XF 2.x versions
- 2.0
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:
You can also place the css in a .less file but this is the simplest way for beginners.
I hope you and your users enjoy it!
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:
CSS:
<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.
I hope you and your users enjoy it!
