Direction aware Hover Effect

[rad0301]

Hi,

I am trying to achieve this direction aware hover effect of sorts as seen in this link http://www.pixel-industry.com/html/royal-plate/index.html. If you hover over the home page slider elements they move in the opposite direction as the cursor.

Please could someone help me achieve this.

Thanks

[Shikkediel]

Here’s the basic idea:

codepen.io/PQdRxb

[rad0301]

I struggle a little when it comes to javascript. I want to add this to my wordpress site. How do I do that? Do I add it to the functions file of my child theme and if yes, how? When I try to do that it is giving me an error.

[Shikkediel]

I couldn’t tell you the specifics for a WordPress site, I am not familiar with it.

This bit of code I posted is only very general, it will without a doubt not work out of the box on any random site. I’d need to see that page to adapt the script to match the elements.

[rad0301]

I am looking to add it to this div called #animate on this page

http://www.idesgn.co/tbw/

I expect the h1 elements to move.

Please let me know if you can help.

Thanks in advance

[Shikkediel]

So just “Our Story” should be moved around, right? And the area that should respond to the mousemove is #animate, not the entire window?

[Author]

Posts