• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Xmas time! Snow animation header 2017-12-05

No permission to download
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:
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!
Author
Spinix-
Downloads
31
First release
Last update
Rating
5.00 star(s) 1 ratings

Latest reviews

A nice touch for my xmas theme. Looks great in the header and doesn't interfere with the rest of the forum.