react-rainfall-animation v1.0.0

Simple rainfall animation

Preview

You should use this package for react.js only. If you want to use it without react, you can find all source code in my GitHub profile

Get Started

Firstly, you should write this code:

import  Rainfall  from  'react-rainfall-animation/src/Rain'

function  App() {
  return (
    <div className="App">
      <div id="Rain">
        <Rainfall  dropletsAmount={200}  />
      </div>
    </div>
  );
}

The dropletsAmount can be different. Then, you should make styles for droplet. For example:

#Rain {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	z-index: -1;
}

.drop {
	background: #000;
	width: 1px;
	height: 89px;
	position: absolute;
	bottom: 200px;
	animation: falling 1.5s  linear  infinite;
}

@media (max-width: 600px) {
	#Rain {
		height: 105vh;
	}
}

@keyframes  falling {
	0% {
		transform: translate(0, 0)
	}
	100% {
		transform: translate(0, 1000px)
	}
}

Oblique rain

Sometimes we need to make oblique droplets. And you can do it very simple. Let's consider the solution.

import  ObliqueRain  from  'react-rainfall-animation/src/ObliqueRain'
  
function  App() {
  return (
    <div  className="App">
      <div  id="Rain">
        <ObliqueRain  dropletsAmount={200}  amplitude={400}  />
      </div>
    </div>
  );
}

Amplitude is the number of pixels each drop will rotate. But it's not enough.

#Rain {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	z-index: -1;
}

.droplet {
	background: #000;
	width: 1px;
	height: 89px;
	position: absolute;
	bottom: 200px;
	animation: fall 1.5s  linear  infinite;
}

@media (max-width: 600px) {
	#Rain {
		height: 105vh;
	}
}

@keyframes  fall {
	0% {
		transform: translate(0, 0) rotate(15deg)
	}
	
	100% {
		transform: translate(-400px, 1000px) rotate(15deg)
	}
}

Warning: in animation, result positionX must be the opposite number from amplitude Happy hacking =)