Animating background images on hover

I am looking to find a tutorial that would point me in the direction of creating a landing page like the background for Playstation’s God of War game (https://godofwar.playstation.com) DOn’t know if it’s just CSS or CSS and vanilla js, etc.

It seems to have multiple layers that are affected by the mouse over and mouse movement.

Any thoughts appreciated.

Yes it looks like the animation is controlled by js, not css hover.
The background is rotating with mouse movement.

In fact the whole page is controlled by js. :eek:

When it is disabled all my eyes can see is #1a1b1c. :wonky:

I believe that…

<noscript>Information here</noscript>

…should be mandatory for all sites like that. :winky:

coothead

1 Like

Something like this maybe.

Just search for Parallax css/js hover effects.

Is that one of those pages that get in the way from you getting to the actual site :slight_smile:

1 Like

What you are looking for sounds like WebGL animation. There are examples of that,where when you put your mouse over the image, it will animate. Forgive me if I’m wrong, but sure sounds like it’s what you are looking for :thinking::slightly_smiling_face:

No actually, I just want to use that effect in the hero area of a page, not as a gate. :slight_smile:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.