How to Create Random Water Waves with Drops in CSS3


In this article I will show you how to create random water waves with drops in css3.  well in this tutorial we just going to create this amazing water drop effect and fill up the cup with the water. We create an illustration of the water drop and increase the water level in the cup. How we gonna need to know is HTML and CSS. You just need to basic understanding of HTML and CSS to create this tutorial.

let me first show you the tutorial screenshot which we are creating in this tutorial.

Random Water Waves with Drops

To create random wave you are using JavaScript.  you will get the value from the CSS. So in the above image, you will see we have a cup with the help and we insert two drops at a time.  when the Drop comes in and fills the cup the water level will increase automatically. we will change the water level so it looks like it is changing just because of the water drops.

We also wanted to show you how to create this beautiful Cup with the help and also show you how you can create the water drops in CSS. There is nothing advanced in this tutorial to understand but you just know the basics of HTML and CSS. We explain everything from scratch so you don’t want to worry about anything.

So let’s get started and Random Water Waves with Drops.

 

Index.html

In my all tutorials you always say that we create the index file for HTML and we choose style.css for cascading style sheet. Now the first step is to create the index file in the project. So just open your editor. I am using Visual Studio code. open the empty folder and create the index.html file. In this file, we put all the design of the project.

Your index file should look like this.

In this file, I just link style file using link tag and specify the title for the document. Just after that, I will create two division tags for the drops. Then specify the class name for this to division tag drops. and you will see we also add light blue class today division tag also. The light blue class is just the gradient colour which we are providing for the element. it is the custom class which we are creating in the style file.

Just after that, I will create a boxing class and in this class, we create a div with waves class. So the box class create a Cup design and the waves will represent water level. Then I just wanted to create hilt for the cup so will create hilt using division tag and specify class name hilt. Now I just wanted to move forward and create the style for this document.

 

Style.css

Now you just need to create the style.css file which we already linked to the index file in the head section. Keep in mind the filename must be same if you copy the index file in your document or just change the style source path if you have a different file location.

Now in this file, we just going to create the style for our document.  so using this style we create cup hilt and water drops. So just import this code in your style.css file.  Your style file should look like this.

In the style file, I just created the keyframe for the water wave and we also create one more keyframe for water drops. The CSS code is really simple and in that code, you can find the comment. in that comment, we specify the bottom property you can enable that property and see the effect and just comment it again.

In the style.css file, nothing is very serious it’s just the common style file that creates different shapes.  after importing this code into your style file. now we just wanted to add JavaScript code that generates random water waves. We are not creating in the external file for that so we’ll just use a script tag to insert script in the document and insert JavaScript code.

 

Little JavaScript

Now we just wanted to insert a little JavaScript code on the bottom before the closing body tag. This code will create random water waves. In this code, we just change the bottom property of the water waves. So we just select that property using JavaScript and just change the bottom property using the class list.

We are just specifying the different value to the bottom property so this will generate that random waves.

Just insert this code before the closing body tag.  you will see be inserted Bottom property -170. Where it comes from?  so you just wanted to know where you want to specify your way where you want to start your waves.  according to my PC screen, I specify the bottom property. If you have a different width and height of monitor and if the waves are not properly working then you just want to adjust this value

We also use a set interval function that executes in every 2 seconds. Using if and else statement will just change the bottom property if it is overflow.  just as simple as that.

Your index file should look like this.

That’s it now everything is set up.  We just wanted to run this document in your browser.

That’s it our Random water waves with drops is created.  That is all for this article. we will take you back again in the next one.