Clicking the label will toggle the checkbox and allow us to handle the two states. The whole heart and its other parts will be the of the checkbox. The heart is the element itself, the bubble is the ::before pseudo-element and the particles are the ::after pseudo-element. This means that it can be done with just one element and its two pseudos. The next thing to notice about the sprite is that it has three components: So we could take this 29 to be either 28 or 30, whichever suits us best. 29 is pretty close to both 28, which is a multiple of 4 as 4 * 7 = 28, and 30, which is a multiple of 5 ( 5 * 6 = 30). Oh, well… that’s what approximations are good for. That’s when it starts looking ugly to me because it’s a big prime number, I can’t divide it by small pretty numbers like 2, 4, or 5 and get an integer. It has 29 frames, a number I have no problem with, until it comes to computations. Now let’s see how I did it! Looking at the original sprite Original twitter heart sprite. The result: Recording of the resulting animation I also decided I’d do it without JavaScript because this is a perfect candidate for the checkbox hack, which allows you to make simple on/off toggles through form elements and clever CSS. Surely it could be done without images, right? I later learned that this is how Twitter does it. In this case, I was surprised to see the demo was using an image sprite.
#Picgif heavy heart animated code
If I happen to have a bit of time, I always look through the code of demos that catch my attention to see if there’s something in there that I could use or improve. I recently saw a recreation of the Twitter heart animation among the picks on CodePen.
0 kommentar(er)
