It is in your "Falling hearts & lips" announcement. The hearts and lips are fantastic but where is the code? I sure picked a bad time to be busy on personal things. Thank you soooo much Pam and Kyle! It's looks great! Love it! Reply Product Information: Animated overlay 16 PNG files included Template Resolution 1600×1600 Software Capability Our products are compatible with any and all major photo booth or photography workflow software using the resolution details stated above. You have floating valentines and lips.!!!!!įorgot to tell you, (Francine), to turn it off, just deactivate the new announcement that I created. This animated overlay is perfect for Valentine’s Day and wedding events. Would you copy the code for Francine? Thanks. I tried to copy the code on my reply, and it wouldn't copy over. Pam.LOVE the floating hears!!! How did you do that?! Reply The more you have, the slower your page will appear - it will bog down the system. If you want more of them, you just change this line:Īmount=9 //Smoothness depends on image file size, the smaller the size the more you can use!Ĭhange the 9 to how many you want. I fixed your announcement so it works on FireFox. I sure would love to have a few more of these little jokers floating down. The only problem is that I set up 7 different images of these items and they are floating sporadically. Would one of you wonderful staffers at CC please check out my home page? I have set up a Valentine announcement and placed floating hearts and lips. We’re going to start using the SCSS syntax here, since we’re going to end up using it as we need to do a few computations anyway.Questions and Answers About Building Your Site Both the bubble and the particles are round, so we give them border-radius: 50%. We want them in the middle, so at 50% from the top and left it is. We want them underneath the heart, so we use z-index: -1 to do this. We set position: relative on our heart label so we can position them absolutely. Now let’s move on to the pseudo elements that create the bubble (and also the particles, which we’ll cover next). If we don’t include the 0% or 100% keyframes, they get automatically generated using the values we have set for that element (in our case font-size: 2em), or, if we haven’t done that, from the default values (which would be 1em in the case of the font-size). The result of the above code can be seen in the following Pen: Let’s get the checkbox out of sight: Īnimation: heart 1s cubic-bezier(.17. In this situation, our HTML looks like this, a checkbox and a label containing a unicode heart: 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. 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |