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

XF 1.4 CSS3 Snow Animation

Discussion in 'Styling and Customization Questions' started by iamjudd, Dec 10, 2014.

  1. iamjudd

    iamjudd Active Member

    Allan likes this.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.

    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.
     

    Attached Files:

    Puntocom likes this.
  3. iamjudd

    iamjudd Active Member

    thank you thank you!
     
  4. JamesBrown

    JamesBrown Well-Known Member

  5. Puntocom

    Puntocom Well-Known Member

    Very nice! thank you.
     
  6. Sheratan

    Sheratan Well-Known Member

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

    Jake Bunce XenForo Moderator Staff Member

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

    Andy.N Well-Known Member

Share This Page