The falling snow feature
-
-
Hi there,
You can download the snowflake image from here
Note the file name is different as in the gist but it will work the same as you’ll replace the file name from the code with the actual URL of the file in your media library.
If you’re on a Premium or Business Plan site and need help applying this workaround, please start a new thread or contact live chat support at https://wordpress.com/help/contact and we can help you there.
For folks on our Free or Personal plan, this is a workaround that unfortunately depends on having the Custom Design feature included in Premium on your site, so it cannot be used on Free or Personal plan sites.
However, we are relaying feedback to our developers about people who want the feature back so they can look into the possibilities for the future.
-
staff-zinnia I made a mistake. My 3 blogs are Premium not personal. I added the photo to media. Noted the URL. Then added the html to a widget. Then opened the CSS and copied and pasted and added my photos URL but it still won’t work. Please let me know what I am going wrong for ramblingwoods2.com …Michelle
-
-
What a shame! I’ve loved the snow feature and have always tweeted extra links to my site whenever the snow started and got a good response. Please revive it for next winter!
-
My readers and I miss the snow! Such a shame that you have to have the business plan in order to have snow. :(
-
-
How sad! I didn’t always want the snow (so I really appreciated that you could turn it off if you didn’t), but I was quite in the mood for it this year. Please add my voice to the chorus for prioritization next year.
-
I’m disappointed to not see the snow on my blog this year. It brought a bit of joy and whimsy to the pages. Please bring it back.
-
-
Having trouble getting this falling snow up on my newly purchased PREMIUM plan today. Can you do mine, as well?
-
Need help getting this up on my site, as well. Just upgraded to PREMIUM today.
-
The snow code worked for the Premium but made the site flicker on a mobile device so no snow this year. psychiccarlabr…the directions are listed here, nobody did it for me and it causes problems when viewing on a mobile device.
-
I added it to “Second Footer Widget Area” .. but wondering if that is why I am not seeing it. Code is accurate.
??????
-
With your Premium plan you can “chat” with WP on Monday. You add the image to your media and then add the location of that photo to the widget and then there is code to add to the CSS area of your theme options. Confusing. Yes.
-
Where did you place your code? Which widget area? And can you place in a primary area where there already exists another widget?
-
Here are the instructions that were posted a while back and just go back. I don’t know enough to help as I did get snow on the first quarter of the blog, but it made the view on a mobile device impossible to read so I gave up.
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 areaAdd 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 :) -
That’s the code I used. But if I cannot get this to work properly, I will just go back to Personal plan and be done with it. Thanks for the replies. :)
-
Wait till Monday as they can tell you what theme you need to use that has the CSS availability. You can get a refund if it doesn’t work. I’m sorry, I don’t know enough about it to help more than I have.
- The topic ‘The falling snow feature’ is closed to new replies.
WordPress.com Forums 
