Grow your CSS skills. Land your dream job.

How to Achieve This Functionality without the Use of Adobe Flash

  • # May 16, 2013 at 11:52 am

    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.

    # May 16, 2013 at 11:57 am

    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…..

    # May 16, 2013 at 12:21 pm

    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

    # May 16, 2013 at 12:43 pm

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

    # May 16, 2013 at 4:14 pm

    > 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.

    # May 16, 2013 at 4:28 pm

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

    # May 16, 2013 at 4:33 pm

    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.

    # May 16, 2013 at 5:09 pm

    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.

    # May 16, 2013 at 5:15 pm

    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.

    # May 16, 2013 at 6:46 pm

    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

    # May 17, 2013 at 8:49 am

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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".