How to create cloud rain animation using CSS jQuery

In this post I will show you how to create cloud rain animation using CSS jQuery. Let’s have a look at our final result below.

[wp-js-fiddle url=”http://jsfiddle.net/mosleh/aLLpC/16/” style=”width:99%; height:400px; border:solid #4173A0 1px;”]

Now let’s begin how to do it on your webpage.
STEP: 1
Add this code inside the body section of your HTML webpage.

<section class="rain"></section>
<div id="clouds">
    <div class="cloud x1"></div>
    <div class="cloud x2"></div>
    <div class="cloud x3"></div>
    <div class="cloud x4"><div>
    <div class="cloud x5"></div>
</div>

STEP: 2
Add the CSS code below inside the head section of your HTML webpage.

<style type="text/css">
*{ margin: 0, padding: 0;}

body {
   overflow: hidden;  
   background: #c9dbe9;
   background: -linear-gradient(top,#c9dbe9 0%, #fff 100%);
   background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
   background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);  
}

.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(255,255,255,1) ), to(rgba(255,255,255,0.6))  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
  width:1px;
  height:89px;
  position: absolute;
  bottom:200px;
  -webkit-animation: fall 1s linear infinite;
  -moz-animation: fall 1s linear infinite;
  
}

#clouds {
    padding: 100px 0;
}

.cloud {
    width: 200px;
    height: 60px;
    background: #fff;
    
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    
    position: relative;
}

.cloud:before, .cloud:after {
    content: '';
    position: absolute;
    top: -15px;
    left: 10px;
    background: #fff;
    width: 100px;
    height: 80px;
    
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

.cloud:after {
    width: 120px; 
    height: 120px;
    top: -55px;
    left: auto;
    right: 15px;
}

.x1 {
    -webkit-animation: moveclouds 15s linear infinite;
    -moz-animation: moveclouds 15s linear infinite;
}

.x2 {
    left: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    opacity: 0.6;
    -webkit-animation: moveclouds 25s linear infinite;
    -moz-animation: moveclouds 25s linear infinite;
}

.x3 {
    left: -250px;
    top: -200px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    opacity: 0.8;
    
    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
}

.x4 {
    left: 470px;
    top: -250px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    opacity: 0.75;
    -webkit-animation: moveclouds 18s linear infinite;
    -moz-animation: moveclouds 18s linear infinite;
}

.x5 {
    left: -150px;
    top: -150px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    opacity: 0.8;
    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
    0% { margin-left: 1000px;}
    100% { margin-left: -1000px;}
}

@-moz-keyframes moveclouds {
    0% { margin-left: 1000px;}
    100% { margin-left: -1000px;}
}

@-webkit-keyframes fall {
	to {margin-top:900px;}
}

@-moz-keyframes fall {
	to {margin-top:900px;}
}
</style>

If you use an external CSS file named “style.css” then add the CSS code there without style tag on top & bottom. Make sure to add the external file into the head section of your page like below.

<link rel="stylesheet" type="text/css" href="style.css">

STEP: 3
Add the jQuery code below into a separate JavaScript file named “rain.js”.

// number of drops created.
var nbDrop = 1000; 

// function to generate a random number range.
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

// function to generate drops
function createRain() {

	for( i=1;i<nbDrop;i++) {
	var dropLeft = randRange(0,1600);
	var dropTop = randRange(-1000,1400);

	$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
	$('#drop'+i).css('left',dropLeft);
	$('#drop'+i).css('top',dropTop);
	}

}
// Make it rain
createRain();

Now add the external JavaScript file in the head section with jQuery file like below.

<script src="code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="rain.js"></script>
Post Tagged with , , , , ,

2 Responses so far.

  1. Yaniv says:

    Hi!
    First of all, thank you very much for that detailed and professional tutorial.
    i’m having trouble making it rain in my website. the JQUERY libraries are loaded but it’s still not working. my website is a wordpress website and one of my ways to try fix that was with wp_enqueue_script. can you help me making it rain?
    thanks in advance,
    Yaniv.

    • Yaniv says:

      hi again, i found a solution and now its working!
      i wraped the Jquery script with:
      jQuery(document).ready(function ($) {
      //your code here
      }

      now, there is a way to get this script work on only a specific region within a page and not the whole page?

Leave a Reply

Your email address will not be published. Required fields are marked *

15 + twelve =

This site uses Akismet to reduce spam. Learn how your comment data is processed.