The falling snow feature

  • t10acite · Member ·

    No snow and the awful new editor. Happy Holidays!!!…I’ve been using WordPress.com since 2009 and paying for the Premium Plan since it was offered. The snow was just a nice touch and I enjoyed it. But if the old editor is going away, then I have to move on because I really don’t like it no matter how much I have tried to use it. So you gave me the shove I needed to think of other options. Season’s Greetings and pretend it’s snowing…Actually it is here, just not on my blog…This is the first time I have ever posted in the forum in all those years… Michelle

  • cosmeticlotro · Member ·

    This is very sad. I was looking forward to the snow too. I only have a Personal Plan, so no snow for me this year it seems.

  • tofflan · Member ·

    I miss the snow too!!!

  • sobakasu0319 · Member ·

    私も雪を楽しみにしていたので残念です。
    日本にも、そういう者がいることを、
    解かっていただくため日本語で書きました。

  • helplesswhilstdrying · Member ·

    Surely this wouldn’t actually require much development time and you’re just able to use version control to roll this out again – snow has been the same snow for as many years as I can remember!

  • helplesswhilstdrying · Member ·

    Bah humbug! Surely this wouldn’t actually require much development time and you’re just able to use version control to roll this out again – snow has been the same snow for as many years as I can remember!

  • staff-zinnia · Staff ·

    Friends –

    Thanks for all of your feedback. There is a work around available with CSS.

    In order to use this option, you need to have the premium plan. I know that’s not possible for everyone. But, I am hopeful this could help some.

    ———————————
    – Open media library
    – Download this image and upload to your media library (https://premiumcoding.com/css3-tricks-falling-snow-css/)
    – Note the URL

    – Open customizer
    – Go to “Widgets”
    – Create a new “Custom HTML” widget in any widget area

    Add the following HTML:

    – Go to “Custom CSS”
    – Paste in the following, and replace snowflake.png with the full URL from your media library.

    .fallingSnow {
    position: absolute;
    left: 0px; right: 0px; top: 0px; height: 500px;
    text-align: center;
}
.fallingSnow span {
    display: inline-block;
    width: 20px;
    height: 21px;
    margin: -280px 60px 54px  -34px;
    background:url("snowflake.png");
 
    -webkit-animation: fallingSnow 12s infinite  cubic-bezier(0.35,0.45,0.39,0.29);
    -moz-animation: fallingSnow 12s infinite  cubic-bezier(0.35,0.45,0.39,0.29);
}
.fallingSnow span:nth-child(5n+5) {
 
    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
}
.fallingSnow span:nth-child(3n+2) {
 
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}
.fallingSnow span:nth-child(2n+5) {
 
    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
}
 
.fallingSnow span:nth-child(3n+10) {
 
    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
}
.fallingSnow span:nth-child(7n+2) {
 
    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
}
.fallingSnow span:nth-child(4n+5) {
 
    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
}
.fallingSnow span:nth-child(3n+7) {
 
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
}
@-webkit-keyframes fallingSnow {
  0% {
    opacity: 1;
 
    -webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;
 
    -webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;
 
    -webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}
@-moz-keyframes fallingSnow {
  0% {
    opacity: 1;
 
    -webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;
 
    -webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;
 
    -webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}

    Don’t forget to save :)

  • staff-zinnia · Staff ·

    Scratch that ^ I can’t get the html to come through and not get pulled out of the post.

    I’ve created a public gist, let me know if you aren’t able to view it. The full instructions are here:


    Thanks for all of your feedback. There is a work around available with CSS.
    In order to use this option, you need to have the premium plan. I know that’s not possible for everyone. But, I am hopeful this could help some.
    ———————————
    – Open media library
    – Upload “snowflake.png“
    – Note the URL
    – Open customizer
    – Go to “Widgets”
    – Create a new “Custom HTML” widget in any widget area
    Add the following HTML:
    <div class="fallingSnow">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    </div>
    – Go to “Custom CSS”
    – Paste in the following, and replace snowflake.png with the full URL from your media library.
    .fallingSnow {
    position: absolute;
    left: 0px; right: 0px; top: 0px; height: 500px;
    text-align: center;
    }
    .fallingSnow span {
    display: inline-block;
    width: 20px;
    height: 21px;
    margin: -280px 60px 54px -34px;
    background:url("snowflake.png");
    -webkit-animation: fallingSnow 12s infinite cubic-bezier(0.35,0.45,0.39,0.29);
    -moz-animation: fallingSnow 12s infinite cubic-bezier(0.35,0.45,0.39,0.29);
    }
    .fallingSnow span:nth-child(5n+5) {
    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
    }
    .fallingSnow span:nth-child(3n+2) {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    }
    .fallingSnow span:nth-child(2n+5) {
    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
    }
    .fallingSnow span:nth-child(3n+10) {
    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
    }
    .fallingSnow span:nth-child(7n+2) {
    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
    }
    .fallingSnow span:nth-child(4n+5) {
    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
    }
    .fallingSnow span:nth-child(3n+7) {
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    }
    @-webkit-keyframes fallingSnow {
    0% {
    opacity: 1;
    -webkit-transform: translate(0, 0px) rotateZ(0deg);
    }
    75% {
    opacity: 1;
    -webkit-transform: translate(100px, 600px) rotateZ(270deg);
    }
    100% {
    opacity: 0;
    -webkit-transform: translate(150px, 800px) rotateZ(360deg);
    }
    }
    @-moz-keyframes fallingSnow {
    0% {
    opacity: 1;
    -webkit-transform: translate(0, 0px) rotateZ(0deg);
    }
    75% {
    opacity: 1;
    -webkit-transform: translate(100px, 600px) rotateZ(270deg);
    }
    100% {
    opacity: 0;
    -webkit-transform: translate(150px, 800px) rotateZ(360deg);
    }
    }
    Don't forget to SAVE your changes :)

    view raw

    gistfile1.txt

    hosted with ❤ by GitHub

  • lupuslapis · Member ·

    The snow feature was free. Now they want us to pay for it! Simple as that. Those of us with free blogs are raking in the money for WP with the adverts we have to put up with all over our blogs. We have all more than paid for the snow feature with those adverts!!

  • t10acite · Member ·

    I have 3 personal plans right now..This will work for snow then?

  • t10acite · Member ·

    The snowflake png is marked as a private blog so this will not work.

  • dianewordsworth · Member ·

    I really appreciate that you’re trying to help out, @lizkarkoski, so thanks for that. I do feel it’s a bit unfair, though, to (a) have a workaround for premium customers only and not everyone, and (b) make it so technical! I can’t get that snowflake png to work either and just looking at the instructions gives me a headache. This was just one reason why WordPress was so popular in the first place, the easy, user-friendly interface. And now it just gets harder and harder, with more hoops to jump through and not very inclusive for the less technical minded. (The new new editor and the old new editor also spring to mind here – I just haven’t had the time to go into the necessary detail for starting a new thread about those, sorry.)

    If we could understand all of that technical blurb, we wouldn’t be picking a product off the shelf, we’d be creating our own.

    When I joined WP, we didn’t have ads all over the place (one reason I upgraded to premium), and we didn’t have to pay extra or have a degree in computer programming just to have a delightful little falling-snow thing included. We’re just not getting any incentive to stay, and that’s quite sad.

  • staff-zinnia · Staff ·

    dianewordsworth – I can add the snow to your premium site with this work around. Just confirm the URL for me :)

  • staff-zinnia · Staff ·

    t10acite –

    The premium plan is needed in order to edit the CSS on your site, which is how this work around is structured. There’s no other way to add snow this year.

  • dianewordsworth · Member ·

    My url is https://dianewordsworth.com :-)

  • t10acite · Member ·

    lizarkoski… I can’t get the snowflake pmg as it is marked as private for my premium blogs.

  • dianewordsworth · Member ·

    It is a shame, but thanks for listening anyway. :-)

  • t10acite · Member ·

    Diane..if the snowflake png was able to be uploaded then it would be a matter of creating a widget with the html code, but I can’t get the snowflake png for my blog ramblingwoods2.com

  • dianewordsworth · Member ·

    @t10acite It was coming up as private for me too, but as it’s the end of the working day here, I don’t have the energy at the moment to get my head around it. :-)

  • dianewordsworth · Member ·

    Oh, I’m currently paying for personal plan, not premium. I thought anything I had to pay for was premium. :-(

1 2 3 6
  • The topic ‘The falling snow feature’ is closed to new replies.