I am very new in javascrip,and I want to make a div in a page with rain effect,I made something,but I don't know how to make it move,It draw random blue points in my div and I want them to go down,this is my code:
<html>
<head>
<style>
.punct
{
background-color:blue;
position:absolute;
width:2px;
height:6px;
}
</style>
<script type="text/javascript">
var cleft;
var ctop;
var x=document.getElementById ('content');
function strop (cleft,ctop,d)
{
if (x==null) x="<div class='punct' style='top:"+ctop+"px;left:"+cleft+"px'></div>";
else x=x+"<div class='punct' id='"+d+"' style='top:"+ctop+"px;left:"+cleft+"px'> </div>";
document.getElementById ('content').innerHTML=x;
}
function randomFromInterval(from,to)
{
return Math.floor(Math.random()*(to-from+1)+from);
}
var y=30;
function start ()
{
if (y!=0){
var a;
var b;
cleft=a;
ctop=b;
a=randomFromInterval (20,1000);
b=randomFromInterval (10,50);
strop(a,b,y);
setTimeout (function () {start ()},500);
y--;
}
}
</script>
</head>
<body>
<div id='content' style='border:2px solid black; height:500px; width:1000px;'></div>
<button onclick='start()'>Start </button>
</body>
</html>
I am very new in javascrip,and I want to make a div in a page with rain effect,I made something,but I don't know how to make it move,It draw random blue points in my div and I want them to go down,this is my code:
<html>
<head>
<style>
.punct
{
background-color:blue;
position:absolute;
width:2px;
height:6px;
}
</style>
<script type="text/javascript">
var cleft;
var ctop;
var x=document.getElementById ('content');
function strop (cleft,ctop,d)
{
if (x==null) x="<div class='punct' style='top:"+ctop+"px;left:"+cleft+"px'></div>";
else x=x+"<div class='punct' id='"+d+"' style='top:"+ctop+"px;left:"+cleft+"px'> </div>";
document.getElementById ('content').innerHTML=x;
}
function randomFromInterval(from,to)
{
return Math.floor(Math.random()*(to-from+1)+from);
}
var y=30;
function start ()
{
if (y!=0){
var a;
var b;
cleft=a;
ctop=b;
a=randomFromInterval (20,1000);
b=randomFromInterval (10,50);
strop(a,b,y);
setTimeout (function () {start ()},500);
y--;
}
}
</script>
</head>
<body>
<div id='content' style='border:2px solid black; height:500px; width:1000px;'></div>
<button onclick='start()'>Start </button>
</body>
</html>
- You'll have a much easier time using jQuery's animate() method to acplish effects like these. – Delon Commented Dec 5, 2012 at 10:01
- 1 Here is an example that doews what you want: htmlfreecodes./Rain_on_page.htm – Josh Greifer Commented Dec 5, 2012 at 10:02
- Helps to do a fiddle - @Josh your example is from last millenium – mplungjan Commented Dec 5, 2012 at 10:03
- @mplungjan - true, but so is the posted code! – Josh Greifer Commented Dec 5, 2012 at 10:07
- 1 Updated version of what @JoshGreifer posted jsfiddle/mplungjan/XcfGt – mplungjan Commented Dec 5, 2012 at 12:36
5 Answers
Reset to default 3Another javascript-only solution. This one makes the drops appear slowly as in the original post and removes the drops when they reach the bottom. http://jsfiddle/35h2Q/4/
function strop(cleft, ctop, d) {
var drop = document.createElement('div');
drop.className = 'punct';
drop.style.left = cleft + 'px';
drop.style.top = ctop + 'px';
drop.id = d;
document.getElementById('content').appendChild(drop);
}
function randomFromInterval(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
var n, interval;
function newDrop() {
var x = randomFromInterval(20, 480),
y = randomFromInterval(10, 50);
strop(x, y, n);
n--;
if (n > 0) {
setTimeout(newDrop, 500);
// 500ms is the interval between drops appearing
}
}
function start() {
n = 30;
newDrop();
interval = setInterval(function() {
var drops = document.getElementsByClassName('punct'),
newY;
if (drops.length == 0) {
clearInterval(interval);
return;
}
for (var i = 0; i < drops.length; i++) {
newY = drops[i].offsetTop + 2;
// drops move by 2px in each frame
if (newY > drops[i].parentNode.offsetHeight) {
drops[i].parentNode.removeChild(drops[i]);
}
else {
drops[i].style.top = newY + 'px';
}
}
}, 30); // 30ms is the interval between drops moving (frame rate)
}
Javascript only solution \o/
<script type="text/javascript">
var cleft;
var ctop;
var x=document.getElementById ('content');
function strop (cleft,ctop,d)
{
if (x==null) x="<div class='punct' id='"+d+"' style='top:"+ctop+"px;left:"+cleft+"px'></div>";
else x=x+"<div class='punct' id='"+d+"' style='top:"+ctop+"px;left:"+cleft+"px'></div>";
document.getElementById ('content').innerHTML=x;
}
function randomFromInterval(from,to)
{
return Math.floor(Math.random()*(to-from+1)+from);
}
var y=130;
var speed = 2;
function start ()
{
if (y!=0){
var a;
var b;
cleft=a;
ctop=b;
a=randomFromInterval (20,1000);
b=randomFromInterval (10,500);
strop(a,b,y);
y--;
}
// Move existing droplets
for (var i=1; i<=130; i++)
{
var el = document.getElementById(i.toString());
if (el !== null)
{
var tp = parseInt(el.style.top) + speed + i*.0125;
if (tp > 500)
tp -= 500;
el.style.top = tp + "px";
}
}
setTimeout (function () {start ()},10);
}
</script>
Try this, http://jsfiddle/CBv5K/
<html>
<head>
<style>
#demo
{
background-color:blue;
width:2px;
height:6px;
position:relative;
animation:rain .5s;
-moz-animation:rain .5s; /* Firefox */
-webkit-animation:rain .5s; /* Safari and Chrome */
-o-animation:rain .5s; /* Opera */
}
@keyframes rain
{
0% {top:0px;}
10% {top:50px;}
20% {top:100px;}
30% {top:150px;}
40% {top:200px;}
50% {top:250px;}
60% {top:300px;}
70% {top:350px;}
80% {top:400px;}
90% {top:4500px;}
100% {top:500px;}
}
@-moz-keyframes rain /* Firefox */
{
0% {top:0px;}
10% {top:50px;}
20% {top:100px;}
30% {top:150px;}
40% {top:200px;}
50% {top:250px;}
60% {top:300px;}
70% {top:350px;}
80% {top:400px;}
90% {top:4500px;}
100% {top:500px;}
}
@-webkit-keyframes rain /* Safari and Chrome */
{
0% {top:0px;}
10% {top:50px;}
20% {top:100px;}
30% {top:150px;}
40% {top:200px;}
50% {top:250px;}
60% {top:300px;}
70% {top:350px;}
80% {top:400px;}
90% {top:4500px;}
100% {top:500px;}
}
@-o-keyframes rain /* Opera */
{
0% {top:0px;}
10% {top:50px;}
20% {top:100px;}
30% {top:150px;}
40% {top:200px;}
50% {top:250px;}
60% {top:300px;}
70% {top:350px;}
80% {top:400px;}
90% {top:4500px;}
100% {top:500px;}
}
</style>
</head>
<body>
<div id='demo'></div>
</body>
</html>
I've done it only for one rain drop. I've used CSS for the animation.Remember the more points you give, the smoother the rain will look.
I have found two examples here and hope that they can help you:
Special Rain and Cloud On Page
Hard Raining on the Page
The source codes are also available. You can also find more related things just by a search within the site.
As a user mented, I put the sources here. They are two js files which do the things.
<script type="text/javascript" src="http://htmlfreecodes./codes/rain.js">
</script>
and also
<script src="http://javascriptbestcodes./codes/cloudandrain.js"></script>
You can use the jQuery animate, animate the top position of the div to make the effect a little bit.
Sample Code:
<script>
var cleft;
var ctop;
var x=document.getElementById ('content');
function strop (cleft, ctop, d)
{
if (x==null) x="<div class='punct' style='top:"+ctop+"px;left:"+cleft+"px'></div>";
else x=x+"<div class='punct' id='"+d+"' style='top:"+ctop+"px;left:"+cleft+"px'> </div>";
document.getElementById ('content').innerHTML=x;
}
function randomFromInterval(from, to)
{
return Math.floor(Math.random()*(to-from+1)+from);
}
var y=30;
function start ()
{
if (y != 0){
var a;
var b;
cleft=a;
ctop=b;
a=randomFromInterval (20,1000);
b=randomFromInterval (10,50);
strop(a, b, y);
$("#"+y).animate({"top":"480px"},1000)
setTimeout (function () {start ()},1100);
y--;
}
}
</script>