Simple react reainfall animation
npm install react-rainfall-animation
import Rainfall from 'react-rainfall-animation/src/Rain'
function App() {
return (
);
}
`
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 (
);
}
`
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)
}
}
``