Giving bouncing effects to the image without changing its position on the page.

[PSP]

Hi Friends,

I have an image on the page, now I want to add some bouncy or spring motion effects to the image, I know this is very easy but my idea is to do this effect without changing the image position on the screen, I mean consider image has four corners (x1,y1)(x2,y1)(x2,y2)(x1,y2),
now i want to add those effects without changing these coordinates of image.

I tried in this way: animate the css property of increasing the height and clipping the image to those coordinates on the page(used setInterval). It’s looks like bouncing but looks little weird because of clipping.

Any suggestion or idea?

Thanks in advance.

[Jozsef K.]

Can’t say that it’s clear to me what you want to achieve.You could try animating transform:scale() rule.

Something similar you can find here:
http://cssdeck.com/labs/css-bouncing-bubble-balls

[Paulie_D]

Or like this:

http://codepen.io/Paulie-D/pen/ycBne

[PSP]

Those demos move object, but for me the top and bottom edge of the image should be fixed to the screen.

[Paulie_D]

@PSP In the box-shadow demo the image is not moving at all…it just looks like it is.

[CrocoDillon]

With `transform: scale(…)` the box of the image is preserved as well so it doesn’t influence other elements around it.

[Paulie_D]

My codepen updated to demonstrate `transform:scale` also.

[PSP]

I tried with transform:scale also but i could not achieve my requirements.
It should look like top and bottom “edge” is fixed.

[unasAquila]

Your looking for a Bloat effect?

[CrocoDillon]

You can’t have top and bottom fixed, and change height, all that without clipping.

Try `transform: scale(1.25, 1)`

[unasAquila]

could you provide an image with the states you require.

[Paulie_D]

Added a zoom effect to Codepen.

@PSP To be honest, I think we need to see ‘before’ & ‘after’ examples of what you are trying to achieve.

EDIT: See @unasAquila has just posted the same request.

[PSP]

Sorry because I do not have any image to show it. I can explain it in more clear way.
Consider a spring which is fixed on both the sides, I mean both end of spring is fixed to the certain points, now I want to pull it from the middle, so that it will be giving bouncing effect still both ends are fixed.

[Jozsef K.]

Like a piece of material, blanket, that is blown by the wind, so you see the ripples only? So actually you want a ripple/wawe effect?

[PSP]

Yes.. Kind of… Thanks for understanding

[Author]

Posts