123
user profile image

Christmas is coming up, so wanted to try out making some snow with a CSS3 animation

Comments

  1. Awesome!! I tried it out with a recent photo of my daughter: http://goo.gl/bqlM8x

  2. Nice! thanks!

  3. That's really cool. I'm trying to embed it into an email campaign, sticking the id on the opening table. For some reason the whole email becomes un-clickable, it's as though the snowflakes are on top of everything. Whilst it looks perfect across the whole email, the actual content can't be clicked/highlighted. Any ideas what's wrong?

  4. @olive_rose I have the same issue here, it's due to the #snow div is positioned absolute and is taking over the whole space above the content, like a layer so you're actually just clicking the snow div, not the elements beneath it. You can work around this by selling the #snow div to use pointer-events: none;

  5. I love this! I'm just wondering if there's a way to get it to loop. I notice it will jump back to the starting position once it's done and it's pretty noticeable.

  6. I really love the animation and used it, one thing that bothers me is that the loop is not even. I did some change in the code to make it more even and wanted to share what I did:

    basicly you change the @keyframes snow to

    @keyframes snow { 0% { background-position: 500px 0px, 120px 0px, -100px 0px; } 10% { background-position: 500px 100px, 120px 40px, -100px 30px; } 20% { background-position: 500px 200px, 120px 80px, -100px 60px; } 30% { background-position: 500px 300px, 120px 120px, -100px 90px; } 40% { background-position: 500px 400px, 120px 160px, -100px 120px; } 50% { background-position: 500px 500px, 120px 200px, -100px 150px; } 60% { background-position: 500px 600px, 120px 240px, -100px 180px; } 70% { background-position: 500px 700px, 120px 280px, -100px 210px; } 80% { background-position: 500px 800px, 120px 320px, -100px 240px; } 90% { background-position: 500px 900px, 120px 360px, -100px 270px; } 100% { background-position: 500px 1000px, 120px 400px, -100px 300px; } }

    it worked for me and wanted to help others. Sorry for bad English :)

  7. Good one Hamkru,

    But only the snow falls straight down now... I'll try to make it fall in angle again as a seamlessly loop.

  8. Snow Effect using box-shadow + function random in scss ( settings amountSnow, colorSnow, duration ). I will hope you like it :D http://codepen.io/nguyenlong/pen/BzoNYB

  9. Currently being used on http://ee.co.uk/.

  10. Here is a slightly modified version of Hampus Kruse's and the original keyframes that gives a nice subtle sway back and forth with no obvious loops.

        0% { background-position: 500px 0px, 100px 0px, -100px 0px; }  
        10% { background-position: 500px 100px, 110px 40px, -100px 30px; }  
        20% { background-position: 500px 200px, 120px 80px, -100px 60px; }  
        30% { background-position: 500px 300px, 130px 120px, -100px 90px; }  
        40% { background-position: 500px 400px, 140px 160px, -100px 120px; }  
        50% { background-position: 500px 500px, 150px 200px, -100px 150px; }  
        60% { background-position: 500px 600px, 140px 240px, -100px 180px; }  
        70% { background-position: 500px 700px, 130px 280px, -100px 210px; }  
        80% { background-position: 500px 800px, 120px 320px, -100px 240px; }  
        90% { background-position: 500px 900px, 110px 360px, -100px 270px; }  
        100% { background-position: 500px 1000px, 100px 400px, -100px 300px; }
    
  11. So for everyone that are looking for the images, it seems that his website is down. Please check https://imgur.com/a/uno2H for s1.png, s2.png, s3.png

  12. @ken4516 I'm sure you need it.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...