Page 1 of 1
Hovering/wiggle effect
Posted: Sun Aug 12, 2012 12:23 am
by EcazS
Does anyone know how to create sort of a hovering/floating/wiggle effect with Javascript?
And not the "vibrating" effect that iPhones give out when you press an icon. Think of a hover car that floats up and down. Something like that but also to the sides.
I could animate it with jQuery but then it goes down then to the side and then up again creating a very ugly non-smooth effect.
Like this
http://jsfiddle.net/cx2Sg/2/ but more wavy and smooth.
Re: Hovering/wiggle effect
Posted: Sun Aug 12, 2012 12:37 am
by jacek
You could try creating a transform function that does the speed profile you want and then just setting the margin property on a timer. Something like
[syntax=css]#floaty {
transition: margin-top 1s bezier(0.42,0,0.58,1);
margin-top: 0px;
}[/syntax]
Then
[syntax=javascript]window.setInterval(function(){
var div = document.getElementById('floaty');
div.style.marginTop = (div.style.marginTop == '0px') ? '40px' : '0px';
}, 1000);[/syntax]
which would (in theory) make it move up and down once every two seconds, you would need to mess with the times in the bezier() to get it to look right.
Just the first thing I thought of
![Razz :P](./images/smilies/icon_razz.gif)
Re: Hovering/wiggle effect
Posted: Sun Aug 12, 2012 12:42 am
by EcazS
That creates this,
http://jsfiddle.net/XWkU7/I will look into CSS3 animating but do you possibly have any ideas how to do this without using CSS3?
Re: Hovering/wiggle effect
Posted: Sun Aug 12, 2012 12:50 am
by jacek
Hmm, this is a bit more like I was thinking
http://jsfiddle.net/XWkU7/9/EcazS wrote:I will look into CSS3 animating but do you possibly have any ideas how to do this without using CSS3?
Write some JavaScript to calculate the position and set it on an interval, it's going to be slow as heck compared to the CSS version.
Re: Hovering/wiggle effect
Posted: Sun Aug 12, 2012 1:04 am
by EcazS
I'm not that good with Javascript.
But something like that with the CSS could work... I'm not much into CSS3 but how would I make it "animate"/transition into a small circle, very subtle. Not necessarily a 100% round circle but just so it goes up and to the side and then down and to the other side, sort of...
Re: Hovering/wiggle effect
Posted: Fri Aug 17, 2012 9:06 pm
by jacek
you can combine left and top
http://jsfiddle.net/XWkU7/13/ but getting a smooth (even ish) circle will be hard !