From ff8825c77a82bf21429748eaa5afecf6723c76aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Gabriel?= Date: Wed, 27 Mar 2024 14:37:43 -0300 Subject: [PATCH] Import and made several modifications and improvements Now you can have both animation when idle and on events mouse on and mouse leave. --- .../wwwroot/javascript/animation-rainstorm.js | 91 +++++++++++++++++++ .../wwwroot/scss/animation/_rainstorm.scss | 77 ++++++++++++++++ 2 files changed, 168 insertions(+) create mode 100644 src/Monambike.Web/wwwroot/javascript/animation-rainstorm.js create mode 100644 src/Monambike.Web/wwwroot/scss/animation/_rainstorm.scss diff --git a/src/Monambike.Web/wwwroot/javascript/animation-rainstorm.js b/src/Monambike.Web/wwwroot/javascript/animation-rainstorm.js new file mode 100644 index 0000000..752280d --- /dev/null +++ b/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); diff --git a/src/Monambike.Web/wwwroot/scss/animation/_rainstorm.scss b/src/Monambike.Web/wwwroot/scss/animation/_rainstorm.scss new file mode 100644 index 0000000..7fe217c --- /dev/null +++ b/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)); + } + } + } +}