React JS Falling Snow Animation

index.html

<div id="root"></div>

react-js-falling-snow-animation.markdown

React JS Falling Snow Animation

Falling snow animation over snowy background creates magic effect. Buit in React JS.

A Pen by KnopkaIvy on CodePen.

License.

script.babel

const Snowflake = (props) =>{
			return(
				<p className='Snowflake' id={`item${props.id}`} style={props.style}>
					*
				</p>
			)
}

class Snow extends React.Component {
	snow=()=>{
		let animationDelay = '0s';
		let fontSize = '100px';
		let arr = Array.from('Snowflakes are awesome!!! They are like little pieces of magic!!! Love snowflakes!!! Snowflakes are awesome!!! They are like little pieces of magic!!! Love snowflakes!!! Snowflakes are awesome!!! They are like little pieces of magic!!! Love snowflakes!!!')
				return arr.map((el, i)=>{
			animationDelay = `${(Math.random()*16).toFixed(2)}s`;
			fontSize = `${(Math.floor(Math.random()*10) + 10)}px`;
			let style = {
				animationDelay,
				fontSize
		}
		return (<Snowflake key={i} id={i} style={style}/>)
		})
	}
	
	render(){
		return(
		<div className='App'>
					{this.snow()}
				</div>
		)
	}
}


//************************************
ReactDOM.render(
  <Snow />,
  document.getElementById('root')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

style.css

body {
	background: url("https://images.unsplash.com/photo-1483043012503-8a8849b4c949?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")  center / cover no-repeat;
	margin: 0;
	padding: 0;
	height: 100vh;
}

h1{
	font-size: 100px;
}

.App{
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100vh;
}

.Snowflake {
	dispalay: inline-block;
	width: 0.1%;
	color: #FFFAFA;
	opacity: 0;
	font-size: 120px;
	margin: 0;
	padding: 0;
	animation: fall 16s linear infinite;
}

@keyframes fall {
	0% {
		opacity: 0;
	}
	3% {
		opacity: 0.9;
	}

	90% {
		opacity: 0.9;
	}
	100% {
		transform: translate(0, 97vh);
		opacity: 0;
	}
}