Grow your CSS skills. Land your dream job.

How to: Have page/object movement with Mouse movement

  • # November 6, 2012 at 1:10 pm

    This is hard to explain. I’ve seen it done not too long ago and would reference this if I could.

    I want to create an illusion of space .. that my 2D objects appear to be in 3D with slight movement of the mouse on the screen. I’m only looking to achieve slight movement like you might have seen in past Flash based websites.

    If you look my design I want to use: [Click Here](http://www.behance.net/gallery/Self-Promotion-2011/2413686 “Gregory’s visual example”) : You’ll see on the last image at the bottom.. my logo is acting as the Sun and there are planet around it. If this were a website.. and you moved your mouse cursor to the left or right, the objects (planets) would slightly move with the movement, but the sun would stay stationary…

    Beyond that I was wondering if its possible to add blur to those planets when they were further away / closer .. to make it appear even more like slight 3D.

    Does this make sense? Does anyone know of a site or someone who’s done this before?

    thanks!

    # November 6, 2012 at 1:22 pm

    Are you talking about parallax scrolling?

    If so, http://stolksdorf.github.com/Parallaxjs/

    # November 6, 2012 at 1:27 pm

    No that’s not what I’m looking for but … I just did find an example of the Github 404 page that does it.. if you click on this fake link, the images all move based on the mouse movement.

    https://github.com/cleanandcreative/wp-timeline

    Do you see what I mean?

    # November 6, 2012 at 1:29 pm

    Is this called parallax elements?

    # November 6, 2012 at 1:52 pm

    Yes. If you use inspector/Firebug to check out the source you will see exactly what they are using to do that.

    # November 6, 2012 at 2:40 pm

    Well, Im not much of a dev, but was hoping someone would know where to find a free example of this?

    # November 6, 2012 at 3:23 pm

    Something that is already made for you in the exact way you want it tailored to your design? No, you’re most likely not going to find that. I’ve provided you with a link to a tool that could possibly help but even as a non-dev, you may want to do some more research on your own and maybe seek out the help of someone who *is* a dev that could help put together what you are looking for.

    # November 6, 2012 at 6:44 pm

    makes sense. Thanks I appreciate it :)

    # November 6, 2012 at 6:57 pm

    Anytime! :)

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

You must be logged in to reply to this topic.

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