- This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
Viewing 13 posts - 1 through 13 (of 13 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Pulsating Heartbeat
Is there a way to make a pulsating heartbeat with jQuery?
You could animate the font-size up and down, you could also do it with CSS transitions.
CSS transitions would only work on normal/hover though. I’m not sure if IE9 supports CSS animations either.
This is where I’m at right now: http://codepen.io/andyunleashed/pen/Grumb
Still working on it, it’s super late so eyes are tired :)
Appreciate the demo but the jQuery is not working.
Revived that heart beat – http://codepen.io/andyunleashed/pen/Grumb
Works great in Firefox (other than the huge margin) but not in Chrome for some reason.
Might have been because I was dicking about with it that you got those glitches, was trying to absolutely position it to the right of the text because otherwise it kind of pushes the other text left as the size increases. Working fine in Chrome for me.
Make sure you refresh as it’s doc ready.
Boom. That was the cause. Thanks a lot, man.
Nice!
Now if I could only get it to stop animating after my mouse leaves the heart.
@chrisburton
Here the heart animates only on hover
http://codepen.io/jessecfisher/pen/ICfje
Like to see bad code?
Here was my original solution.
It is inferior because the heart can stop beating between the “keyframes”, which can result in a sluggish start when resuming the animation.
http://codepen.io/jessecfisher/pen/ICfje
Thank you @hotpink! Here is the full result: http://pro.codepen.io/chrisburton/full/AgBzD