⬇️ Preview is below ⬇️
- Click : Dynamic Rain Simulator 2.0 Preview
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.
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.
-
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.
-
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.
- TailwindCSS: A utility-first CSS framework that provides rapid styling. Classes like
-
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.
- 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
-
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.
- Clone the repository to your local machine.
- Open the
index.html
file in your preferred web browser.
- Simply click the "Toggle Rain" button to start the rain effect.
- Click the button again to stop the rain effect.
Design by Kevin Marville aka Kvnbbg.
Portfolio | Twitter: @Kvnbbg