Import and made several modifications and improvements

Now you can have both animation when idle and on events mouse on and mouse leave.

src/Monambike.Web/wwwroot/javascript/animation-rainstorm.js

@@ -0,0 +1,91 @@
+/**************************************************************************
+Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved.
+Contact: contact@monambike.com for more information.
+For license information, please see the LICENSE file in the root directory.
+**************************************************************************/
+// Source: https://codepen.io/datCloud/pen/BaKEEqq
+
+/**
+ * CSS class name for the default rainstorm animation.
+ * Used to identify elements to apply the default rainstorm animation.
+ * @type {string}
+ */
+const rainstormAnimation = "rainstorm-animation";
+
+/**
+ * CSS class name for the hover-triggered rainstorm animation.
+ * Used to identify elements to apply the rainstorm animation on hover.
+ * @type {string}
+ */
+const rainstormAnimationHover = "rainstorm-animation-hover";
+
+/**
+ * Creates rainstorm animation elements and appends them to elements with the
+ * specified class.
+ * 
+ * @param {string} className - The class name of elements to which the rainstorm animation will be applied.
+ * @param {number} rainCount - The number of raindrops to create.
+ */
+function createRainstormAnimation(className, rainCount) {
+    // Get all elements with the specified class name.
+    var elements = document.getElementsByClassName(className);
+
+    // Loop through each element with the specified class.
+    for (let elementIndex = 0; elementIndex < elements.length; elementIndex++) {
+        // Create raindrops for the current element.
+        for (let rainIndex = 0; rainIndex < rainCount; rainIndex++) {
+            // Create a new HR element for each raindrop.
+            let hrElement = document.createElement("HR");
+
+            // Apply thunder class to the last raindrop.
+            if (rainIndex == rainCount - 1) {
+                hrElement.className = "thunder";
+            } else {
+                // Set left position randomly within the window width.
+                hrElement.style.left = Math.floor(Math.random() * window.innerWidth) + "px";
+                // Set animation duration randomly between 0.2 and 0.5 seconds.
+                hrElement.style.animationDuration = 0.2 + Math.random() * 0.3 + "s";
+                // Set animation delay randomly between 0 and 5 seconds.
+                hrElement.style.animationDelay = Math.random() * 5 + "s";
+            }
+
+            // Append the HR element to the current element.
+            elements[elementIndex].appendChild(hrElement);
+        }
+    }
+}
+
+/**
+ * Stops the rainstorm animation by removing all raindrop elements and the thunder effect with
+ * the specified class.
+ * 
+ * @param {string} className - The class name of elements to which the rainstorm animation will be removed.
+ */
+function stopRainstormAnimation(className) {
+    // Select all raindrop elements within elements with the class "rainstorm-animation".
+    var rainstormElements = document.querySelectorAll(".rainstorm-animation-hover hr");
+
+    // Remove each raindrop element.
+    rainstormElements.forEach(function (element) {
+        element.parentNode.removeChild(element);
+    });
+}
+
+// Get all elements with the classes "rainstorm-animation" and "rainstorm-animation-hover".
+var targetElements = document.querySelectorAll(`.${rainstormAnimation}, .${rainstormAnimationHover}`);
+
+// Add event listeners to start and stop the rainstorm animation for each target element.
+targetElements.forEach(function (element) {
+    // Start the rainstorm animation when the mouse enters the element.
+    element.addEventListener("mouseenter", function () {
+        createRainstormAnimation(rainstormAnimationHover, 100);
+    });
+
+    // Stop the rainstorm animation when the mouse leaves the element.
+    element.addEventListener("mouseleave", function () {
+        stopRainstormAnimation(rainstormAnimationHover);
+    });
+});
+
+// Start the rainstorm animation immediately for elements with the "rainstorm-animation" class.
+createRainstormAnimation(rainstormAnimation, 100);

src/Monambike.Web/wwwroot/scss/animation/_rainstorm.scss

@@ -0,0 +1,77 @@
+/**************************************************************************
+Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved.
+Contact: contact@monambike.com for more information.
+For license information, please see the LICENSE file in the root directory.
+**************************************************************************/
+// Source: https://codepen.io/datCloud/pen/BaKEEqq
+
+@import "../base/_colors.scss";
+
+// Rainstorm Animation
+.rainstorm-animation,
+.rainstorm-animation-hover {
+	align-items: center;
+	background-color: $black;
+	display: flex;
+	height: 100vh;
+	justify-content: center;
+	overflow: hidden;
+	width: 100vw;
+
+	// Thunder
+	hr.thunder {
+		animation-name: thunder;
+		animation-delay: 5s;
+		animation-duration: 10s;
+		animation-iteration-count: infinite;
+		animation-timing-function: linear;
+		border: unset;
+		height: 100%;
+		position: absolute;
+		width: 100%;
+
+		@keyframes thunder {
+			0% {
+				background-color: transparent;
+			}
+
+			1% {
+				background-color: white;
+			}
+
+			2% {
+				background-color: rgba(255, 255, 255, 0.8);
+			}
+
+			8% {
+				background-color: transparent;
+			}
+		}
+	}
+
+	// Rain Elements (HR)
+	hr:not(.thunder) {
+		animation-name: rain;
+		animation-duration: 1s;
+		animation-iteration-count: infinite;
+		animation-timing-function: linear;
+		background-color: $white;
+		border-color: transparent;
+		border-right-color: rgba(255, 255, 255, 0.7);
+		border-right-width: 50px;
+		bottom: 100%;
+		position: absolute;
+		transform-origin: 100% 50%;
+		width: 50px;
+
+		@keyframes rain {
+			from {
+				transform: rotate(105deg) translateX(0);
+			}
+
+			to {
+				transform: rotate(105deg) translateX(calc(100vh + 20px));
+			}
+		}
+	}
+}