Rain JS

Developer
WebSonick
Size
2,303 Kb
Views
30,360
  1. Rain JS Previews
  2. Rain JS HTML Codes
  3. Rain JS CSS Codes
  4. Rain JS JS Codes

How do I make an rain js?

JS and CSS Rain example. What is a rain js? How do you make a rain js? This script and codes were developed by WebSonick on 31 December 2022, Saturday.

Rain JS Previews
IQ Test

Rain JS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rain JS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas></canvas>
<img class="blur hide" src="http://armsonick.zz.mu/Demos/ImageHost/images/1382968144FOREST-RAIN-default-beautiful-31001.jpg">
<img class="clean hide" src="http://armsonick.zz.mu/Demos/ImageHost/images/1382968101FOREST-RAIN-default-beautiful-31000.jpg"> <script src="js/index.js"></script>
</body>
</html>

Rain JS - Script Codes CSS Codes

body { background: #333; margin: 0; padding: 0;
}
.hide { display: none;
}

Rain JS - Script Codes JS Codes

(function (d) { window.addEventListener('load', function () { var c = d.querySelector('canvas'); var context = c.getContext('2d'); var blurred = d.querySelector('.blur'); var clean = d.querySelector('.clean'); var w = window.innerWidth; var h = window.outerHeight; var drops = []; var fps = 60; var dropMaxWidth = 30; c.width = w; c.height = h; console.log(w, h); var trails = []; for (var i = 0; i < 250; i++) { drops.push({ "x": Math.floor((Math.random() * w) + 1), "y": Math.floor((Math.random() * h) + 1), "d": Math.floor((Math.random() * dropMaxWidth) + 1), }); } function draw() { context.clearRect(0, 0, w, h); context.drawImage(blurred, 0, 0, w, h); drops.forEach(function (e) { e.x += .1; e.y += .11; e.d -= .02; if (e.x > w || e.x < 0) { e.x = Math.floor((Math.random() * w) + 1); } if (e.y > h || e.y < 0) { e.y = Math.floor((Math.random() * h) + 1); } if (e.d > dropMaxWidth || e.d < 0) { e.d = Math.floor((Math.random() * dropMaxWidth) + 1); } context.save(); context.beginPath(); context.arc(e.x+(e.d/2), e.y+(e.d/2), e.d/2, 0, Math.PI * 2, true); context.closePath(); context.clip(); context.drawImage(clean, e.x, e.y, e.d*2, e.d*2, e.x, e.y, e.d, e.d); context.beginPath(); context.arc(e.x, e.y, e.d/2, 0, Math.PI * 2, true); context.clip(); context.closePath(); context.restore(); if (Math.random() > .995) { trails.push({ "x": e.x, "y": e.y, "d": e.d / 5 }); } }); trails.forEach(function (t) { context.save(); context.beginPath(); context.arc(t.x+(t.d/2), t.y+(t.d/2), t.d/2, 0, Math.PI * 2, true); context.closePath(); context.clip(); context.drawImage(clean, t.x, t.y, t.d*2, t.d*2, t.x, t.y, t.d, t.d); context.beginPath(); context.arc(t.x, t.y, t.d/2, 0, Math.PI * 2, true); context.clip(); context.closePath(); context.restore(); }); } setInterval(draw, 1000 / fps); });
})(document);
Rain JS - Script Codes
Rain JS - Script Codes
Home Page Home
Developer WebSonick
Username WebSonick
Uploaded December 31, 2022
Rating 3
Size 2,303 Kb
Views 30,360
Do you need developer help for Rain JS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

WebSonick (WebSonick) Script Codes
Name
Blog Simple Web Page
Snow
Social Links
Jump Animated Text
World Map Navigation
In second lives - HTML5 CANVAS 3D demo
WebGL Geometry Text
Codepen on ge1doot.js
CSS3 Text Effect
JQuery Clock
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!