kvnbbg / dynamicrainsimulator2.0

⬇️ Preview is below ⬇️

Welcome to the EarthDay Celebration !

⬇️ Preview is below ⬇️

• Click : Dynamic Rain Simulator 2.0 Preview

Enhanced Rain Simulator

Dynamic Rain Simulator 2.0 is a part of the Earth Day Celebration Challenge.

The Enhanced Rain Simulator is a visually appealing web application that simulates raindrops falling on the screen. Built with modern web technologies, it offers a realistic rain effect that can be toggled on and off. The design is responsive, ensuring a seamless experience across various devices.

Table of Contents

• Description
• How It Works
• Installation
• Usage
• Credits

Description

The Enhanced Rain Simulator provides a soothing visual experience of raindrops falling across your screen. It's designed using TailwindCSS for a modern look and feel, and the raindrop effect is achieved using a combination of JavaScript and CSS animations. The simulator also includes a toggle button, allowing users to start or stop the rain effect as they please.

How It Works

1. HTML Structure:

   • The main content area displays a centered droplet and a button to toggle the rain effect.
   • An empty container (<div class="rain-container">) is present, which will hold the dynamically created raindrops.

2. Styling:

   • TailwindCSS: A utility-first CSS framework that provides rapid styling. Classes like bg-gradient-to-b, from-blue-400, etc., are used to style elements.
   • Custom CSS: The @keyframes fall animation simulates the raindrop's movement from the top to the bottom of the viewport.

3. JavaScript Functionality:

   • toggleRain() Function: This function checks the presence of raindrops on the screen. If none are found, it creates 100 raindrops and appends them to the rain-container. If raindrops are present, it clears them out. Each raindrop is given a random horizontal position and a slightly randomized speed and delay for a natural appearance.

4. User Interaction:

   • On loading the page, the user sees a droplet and a "Toggle Rain" button.
   • Clicking the button activates the rain effect, with raindrops falling from the top.
   • Clicking the button again deactivates the rain effect.

Installation

1. Clone the repository to your local machine.
2. Open the index.html file in your preferred web browser.

Usage

• Simply click the "Toggle Rain" button to start the rain effect.
• Click the button again to stop the rain effect.

Credits

Design by Kevin Marville aka Kvnbbg.
Portfolio | Twitter: @Kvnbbg