This content originally appeared on DEV Community and was authored by Rodrigo Antunes
Inspired by a slider I saw this morning, I decided to try creating something along those lines — though not nearly as impressive — using JavaScript 🎨.
It seemed like a fun and challenging task.
So, let's dive in!
HTML
We'll start with a simple structure:
<main>
<input type="range" min="0" max="100" value="0" />
<div class="container"></div> <!-- this is where we'll place the hearts -->
</main>
CSS
The CSS plays a significant role in this project, and I'd like to highlight two key aspects:
- Accent Color
- CSS Animations
Accent Color
I couldn't remember how to change the default look of the <input type="range" /> element. During my research, I came across various vendor-prefixed pseudo-elements like ::-webkit-slider-runnable-track and ::-moz-range-track but the support for these wasn't great. You can see the support details here for webkit and here for moz.
Then I came across a handy little CSS property called accent-color, I remember seeing this a couple times, but not enough for it to stick in my memory. It is a perfect fit for checkbox and ratio elements also.
And the support is flawless.
Good job, Internet! 🥳
input {
/* ... */
accent-color: white;
}
CSS Animations
I usually enjoy coding CSS animations from scratch, fine-tuning them to align with the design goals or specific creative direction. But today, I wasn't feeling it, so I asked ChatGPT to write three organic floating animations with some variations and randomness. It didn't nail it on the first try, so instead of tweaking the animations by hand, I modified the prompt. While it might have been faster to code manually, after some time, the result was good enough.
The one thing I was particularly picky about was the syntax. Initially, it generated something like this:
0% {
transform: translate(0px, 0px) rotateX(45deg) rotateY(30deg) scale(0.25);
}
My reaction was like Michael Scott’s famous "Oh God, Please No!" meme. The CSS Transform Module Level 2 syntax looks so much cleaner:
0% {
translate: 0px 0px;
rotate: 45deg 30deg;
scale: 0.25;
}
Javascript
Okay, let's fire up the engine 🚛.
I found it challenging to explain my thought process, but I spent nearly an hour just thinking through the problem. Here’s a breakdown of my approach:
1. Listen to the input event.
2. Create a new element when the event fires.
3. Animate each element up from where the input is located.
4. Remove each element after it finishes animating.
However, there’s no straightforward way to determine where the "range indicator" is on the screen, just the input element itself. I’m not sure how I came up with the following solution, but I was happy it worked:
// ...
range.addEventListener('input', (e) => {
// ...
const { value } = e.target;
const rangeBoundingBox = range.getBoundingClientRect();
const containerBoundingBox = container.getBoundingClientRect();
// ...
const sliderWidth = rangeBoundingBox.width;
const leftPosition =
rangeBoundingBox.left +
(value / 100) * sliderWidth -
containerBoundingBox.left;
// ...
}
// ...
Feel free to check out the complete code.
I could refine the code for readability, structure it better with functional programming, or even enhance the animations further, but it serves its purpose well for a quick experiment.
I hope you enjoy it, and happy coding!
A big thanks to Chris Gannon for his inspiring work.
This content originally appeared on DEV Community and was authored by Rodrigo Antunes
Rodrigo Antunes | Sciencx (2024-07-31T20:00:23+00:00) Bringing Floating Hearts to Life with CSS and JavaScript. Retrieved from https://www.scien.cx/2024/07/31/bringing-floating-hearts-to-life-with-css-and-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.