This example demonstrate the firefly animation in a forest night background.
Here is the example:
Example
<div class="bg"></div>
<div class="slider input-card">
<label for="density">Rain Density</label>
<input type="range" id="density" name="density" min="0" max="50" value="40">
</div>
<div class="wind input-card">
<label>
<input type="checkbox" id="wind" name="wind">
Wind
</label>
</div>
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
.bg {
width: 1000px;
height: 500px;
background-image: url("https://images.unsplash.com/photo-1503435824048-a799a3a84bf7?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
background-size: cover;
background-color: #d6f0ee;
}
.drop {
position: absolute;
width: 1vw;
height: 1vw;
background-color: #7fabec66;
border-radius: 0px .5vw .5vw .5vw;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: top 2s ease-in, left 2s ease-in;
}
.input-card {
background-color: #776622AA;
color: black;
border-radius: .5em;
box-shadow: 0 0 2em -.5em #55AA99;
padding: .5em 1em;
}
.input-card label {
display: block;
font-weight: 700;
}
.slider {
text-align: center;
position: absolute;
bottom: 1em;
right: 1em;
}
.slider label {
margin-bottom: .25em;
}
.wind {
position: absolute;
bottom: 1em;
left: 1em;
}
.wind input {
margin-right: .5em;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
</style>
<script>
var DOMHandler = /** @class */function () {
function DOMHandler() {
this.parser = new DOMParser();
this.bgEl = document.querySelector('.bg');
this.slider = document.querySelector('#density');
this.checkbox = document.querySelector('#wind');
}
DOMHandler.prototype.getDropDOM = function (topStart, left) {
var doc = this.parser.parseFromString("<div class=\"drop\" style=\"top: " + topStart + "vh; left: " + left + "vw;\"></div>", "text/html");
return doc.querySelector('div');
};
return DOMHandler;
}();
var Drop = /** @class */function () {
function Drop(domHandler) {
this.domHandler = domHandler;
this.bgEl = this.domHandler.bgEl;
this.topStart = Math.round(Math.random() * 100) - 100;
this.leftStart = Math.round(Math.random() * 100);
this.el = this.domHandler.getDropDOM(this.topStart, this.leftStart);
}
Drop.prototype.init = function (wind) {
this.bgEl.appendChild(this.el);
this.applyForces(wind);
};
Drop.prototype.applyForces = function (wind) {
var _this = this;
if (wind) {
this.el.style.left = this.leftStart - 25 + "vw";
}
setTimeout(function () {
_this.el.style.top = _this.topStart + 200 + "vh";
if (wind) {
_this.el.style.left = _this.leftStart + 25 + "vw";
}
setTimeout(function () {
_this.el.remove();
}, 2000);
});
};
return Drop;
}();
var Rain = /** @class */function () {
function Rain(domHandler) {
this.domHandler = domHandler;
this.density = 10;
this.wind = false;
}
Object.defineProperty(Rain.prototype, "density", {
get: function () {
return this._density;
},
set: function (value) {
this._density = 100 - (value + 50);
clearInterval(this.timerID);
this.init();
},
enumerable: true,
configurable: true });
;
Rain.prototype.init = function () {
var _this = this;
this.timerID = setInterval(function () {
var drop = new Drop(_this.domHandler);
drop.init(_this.wind);
}, this.density);
};
return Rain;
}();
var rainApp = {};
rainApp.domHandler = new DOMHandler();
rainApp.rain = new Rain(rainApp.domHandler);
rainApp.slider = rainApp.domHandler.slider;
rainApp.checkbox = rainApp.domHandler.checkbox;
rainApp.slider.addEventListener('change', function () {
rainApp.rain.density = rainApp.slider.valueAsNumber;
});
rainApp.checkbox.addEventListener('change', function () {
rainApp.rain.wind = rainApp.checkbox.checked;
});
rainApp.rain.init();
</script>
