This content originally appeared on DEV Community and was authored by Rodrigo Antunes
This is a quick way I found to congratulate Brazil's top Olympic medalist, Rebeca Andrade, and, of course, share something I learned during the making of this effect.
Double click below to see the effect 🪄
HTML
The markup is pretty straightforward, so I don't think there is much to say, other than highlighting the semantic use of HTML elements for structure and clarity, and the use of <strong> tags so you don't have to handle it in the CSS.
CSS
I noticed there is a little random direction of the rotation every time the effect runs, so I passed a dynamic value to the CSS, similar to how we do with props in React.
.heart {
animation-name: like;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes like {
0% {
opacity: 0;
transform: scale(0)
}
40% {
opacity: .8;
transform: scale(1.2) rotate(var(--random-rotation-deg))
/* dynamic value here 👆 */
}
60% {
opacity: 1;
transform: scale(1)
}
100% {
opacity: 0;
transform: scale(.9) translateY(-500px)
}
}
Javascript
Here's how I created the element, give it the .heart classname (which contains the animation), and generated the random-rotation-deg value.
const image = document.querySelector('.image');
// listen for the 'dblclick' event
image.addEventListener('dblclick', () => {
const rotation = Math.floor(Math.random() * 80) - 40;
// this function returns a value between -40 and 40
const heart = document.createElement('div');
heart.classList.add('heart');
heart.textContent = '🩷';
heart.style.setProperty('--random-rotation-deg', `${rotation}deg`);
// then, I pass this value so it can be read inside the CSS
image.appendChild(heart);
heart.onanimationend = () => heart.remove();
});
This method dynamically creates a heart element on double-click, applies a random rotation to it, and animates it using CSS keyframes.
For asset management, I'm using Cloudinary which offers 25 GB of storage in the free plan — more than enough for small projects.
Once again, Congratulations to Rebeca Andrade, Simone Biles and Jordan Chiles.
This content originally appeared on DEV Community and was authored by Rodrigo Antunes
Rodrigo Antunes | Sciencx (2024-08-05T20:05:27+00:00) Instagram-Style Like Animation 🥇. Retrieved from https://www.scien.cx/2024/08/05/instagram-style-like-animation-%f0%9f%a5%87/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.