How to Achieve This Functionality without the Use of Adobe Flash

[softprinciples]

Hi,

I was wondering if I could please get some direction on how I could take this Adobe Flash website:

[Site](http://www.afmedia.com.au/day.html “”)

and convert it to a HTML/CSS/Javascript/jQuery site?

1) If you notice, the whole background image animates as you move you mouse around – any ideas of any jQuery plugins/examples on how one may achieve this type of animation?

2) With the navigation menu, any jQuery plugins that could achieve the same type of rotation effect when you hover on and off a menu items, i,e, rolls up and back down again?

Any assistance on this, would be much appreciated.

Thanks.

[Paulie_D]

For the backgrounds it’s not hard with multiple background images although the smoke animation might be a little difficult.

The parallax scrolling based on mouse position would be dependent on JS but that’s outside of my field of expertise.

The hover transition could probably be done with the translate property although I’m not entirely sure that it’s actually rolling like a louvre…it’s so quick it looks more like it’s just scrolling straight up .

Interesting projects though…..

[TheDoc]

I would argue that this site could actually be made *better* without flash. Flash sites love doing this: http://cl.ly/image/1S3s3l3I0H1o it’s terrible.

The backgrounds shouldn’t be hard to accomplish with JS, though I don’t have an example based on mouse position.

Menu example: http://davidwalsh.name/demo/3d-menu.php

[unasAquila]

there is a good jQuery plugin called [jParallax](http://stephband.info/jparallax/)

[CrocoDillon]

> The backgrounds shouldn’t be hard to accomplish with JS, though I don’t have an example based on mouse position.

I do: http://codepen.io/CrocoDillon/pen/ukotd

It’s an old one, quick and dirty but everything you need to get started.

[chrisburton]

@Crocodillon Isn’t that a security risk for having Javascript follow your mouse?

[theacefes]

I might be wrong, but I remember an article somewhere that talked about IE and some kind of flaw in the browser that allowed others to track your mouse movements. I’ll see if I can find it.

[CrocoDillon]

I don’t know, if it would be a security risk it would be for users visiting dodgy sites. In Chrome it only seems to track mouse movement as long as you are hovering over the document, so you can’t track a user entering a password in an on-screen keyboard or something.

[chrisburton]

Regarding what @acefes mentioned, I believe I read somewhere on this site or perhaps somewhere else that you can manipulate the Javascript to get a user’s credentials. I’m not sure if it was only related to IE.

[TheDoc]

I can’t see how tracking the cursor position within your website is a security risk to either party?

You’re going to want to look at the mousemove event: https://developer.mozilla.org/en-US/docs/DOM/element.onmousemove

Here’s a super simple example: http://codepen.io/ggilmore/pen/620715577f502d84d805353607cce4d3

[softprinciples]

Thanks to all for your replies – will check them out.

[Author]

Posts