Home
Programming

Raindrops Effect with RainyDay.js

Syiainfoku make a Raindrops Effect with RainyDay.js
Raindrops Effect with RainyDay.js

Hello !

Welcome back, with me the founder of Syiainfoku. You will learn together on the Syiainfoku blog how to make a Raindrops Effect with RainyDay.js.

Ok, let's get started.

Preview Raindrops Effect

Preview Raindrops Effect

More or less the result will be like in the picture above

Source Code and Brief Explanation

To make this program [Raindrops Effect]. First you need to create three Files, one HTML File and one CSS File and lastly one JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Raindrops Effect from the given download button.

Because here I use the JavaScript canvas, namely RainyDay.js, so you have to download canvas JS on the official website. You can visit the site or you can use the download link I provided here

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Raindrops Effect | hitoricoding</title>
    <link rel="stylesheet" href="assets/style.css">
</head>

<body>
    <section>
        <img id="background" alt="background" src="" />
    </section>
    <script src="./assets/rainyday.js"></script>
    <script src="./assets/main.js"></script>
</body>

</html>

Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension. Background image can be changed according to taste.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

section img {
    width: 100%;
}

Finally, create a JS file with the name main.js and paste the given code in your CSS file. Remember, you must create a file with a .js extension.

function rain() {
    const image = document.getElementById('background');
    image.onload = function () {
        var rainyDay = new RainyDay({
            image: this,
            blur: 10,
            fps: 40
        })
        RainyDay.rain([
            [5, 2, 2]
        ], 0)
    }
    image.src = './assets/wll5.jpg';
}
rain()

That's it, now you have successfully created a Raindrops Effect, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.

Download 

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment