Search jQuery

jQuery Forum

'Heartbeat' effect?

in Using jQuery • 8 years ago

I need to have an image of a heart on a site that beats, so essentially it expands and contracts. Whats the best animation effect for this? Should I use .animate to resize the image?
Thanks

Replies(7)

jamesmorr..

I think you'd be better off using an animated GIF (or a flash animation) for this. If you resize an image using jQuery the effect probably won't be very smooth and the image will lose quality as it scales.

Please let me know if you do decide to use a jQuery solution - I'll be interested to see how it turns out!

James

James Morrish - Freelance Web Developer

jdln99

Re: 'Heartbeat' effect?

8 years ago

Ill experiment with giffs. Would a flash object be a vector and so be able to scale smoothly?

jamesmorr..

Re: 'Heartbeat' effect?

8 years ago

The only concern I have is that when resizing an image using jQuery, the browser would be resizing the image rather than something like Photoshop (or Flash). When a browser resizes an image it will generally look much worse than if you use Photoshop to resize it. If you prepare an animated GIF, all resizing will be handled by Photoshop (or whatever tool you use) and so will probably look considerably better.

Flash does use vector graphics, but that is only really relevant if you are going to allow the user to resize the animation - it will mean that flash is able to redraw it without losing quality.

I think in this instance, the animated GIF will be the most appropriate and accessible solution.

James

James Morrish - Freelance Web Developer

jdln99

Re: 'Heartbeat' effect?

8 years ago

OK. The reason I suggested flash is that the image itself could be a vector, so I was thinking the resizing might be smoother?

I had a quick look at giff animations and it seems very clunky.

Instead of resizing I might have the image fade in and out. Ive demoed that and it looks quite nice.

Thanks

jdln99