CSS/Javascript Swinging Box

Question

I have a menu box that contains a few links to pages. I'd like it so that if the user "bumps" it with their cursor, the box reacts and jerks slightly (swings in direction mouse 'pushed' it) and then swings back and forth until it comes to a stop. The menu is in a div, and I need the contents to stay in their relative position to the menu (though rotating with it I guess).

How can I accomplish this using Javascript? Preferably not CSS.

Please edit your question to include the code you've written so far that almost accomplishes this task, or maybe that you think should accomplish it. Then clearly indicate the difference between what your code does now and what you want. — Austin Mullins, Feb 26 '15 at 17:21
@AustinMullins I have no code currently, as I have no idea where to begin. I've researched it thoroughly and cannot find any online references--those are what I am looking for. — SeargentGen, Mar 07 '15 at 18:10

score 1 · Accepted Answer · answered Feb 26 '15 at 17:30

1

How can I accomplish this using Javascript?

You need a function that listens for mouse movements and reports its position. It then compares the cursor position to the positional bounds of the menu. If its within your thresholds you would then reposition/rotate the menu relative to the cursor's approach vector.

answered Feb 26 '15 at 17:30

Moob

14,420
1
34
47

Thanks. Do you know of any references? – SeargentGen Mar 07 '15 at 18:10

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

How about using jQuery Bounce? There is a similar question here: JQuery UI bounce effect - bounce only once on entering div that might help.

edited May 23 '17 at 12:12

Community

1
1

answered Feb 26 '15 at 17:26

mtdev88

28
3

CSS/Javascript Swinging Box

2 Answers2