snow feature

• 

  amanpan · Member · Dec 9, 2018 at 2:29 am

  • Copy link
  • Add topic to favorites

  I have 2 Premium Plan blogs. I am wanting to add the snow feature using custom CSS and html. Can someone help?

  The blog I need help with is: (visible only to logged in users)

• 

  kokkieh · Staff · Dec 11, 2018 at 10:11 am

  • Copy link

  Hi there,

  Please follow the steps outlined here:

  
  

  	1. Download the file at https://cldup.com/zm5pVdFwcJ-3000x3000.png
  	2. Open media library
  	3. Upload the downloaded image file
  	4. Note the URL
  	5. Open customizer
  	6. Go to “Widgets”
  	7. Create a new “Custom HTML” widget in any widget area
  	8. 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>
  	9. Go to “Custom CSS”
  	10. 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;
  	pointer-events: none;
  	user-select: none;
  	}
  	.fallingSnow span {
  	display: inline-block;
  	width: 20px;
  	height: 21px;
  	margin: -280px 60px 54px -34px;
  	background:url("snowflake.png");
  	pointer-events: none;
  	-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);
  	}
  	}
  	10. Click Publish in the Customizer.
  	Credit: https://premiumcoding.com/css3-tricks-falling-snow-css/

  view raw
  
  Holiday Snow
  
  hosted with ❤ by GitHub

  Let us know if you get stuck on any of the steps.