Full Screen Background tilt

[Hector18]

Hi,

 

I've tried to make this effect for a fullscreen background image, but the movement was not fluid. Does everyone know how to do a similar effect for bg images like in this example?

 

https://www.videinfra.com/

 

Thank you!

[Sahil]

Take a look at following thread. As I said in that thread, you might want to use parallax js.

 

Just instead of animating x,y you will need to change rotationX and rotationY, I am not on PC anymore so can't post a demo. 

[Sahil]

I have edited same demo so you will have to rename everything. Again, this is just a demo to show you how it can be done. That site also supports gyroscope, you can do that by using parallax js.

 

 

See the Pen YEvZmK?editors=0110 by Sahil89 (@Sahil89) on CodePen.

 

[Hector18]

Sahil, thank you again!!!

[Hector18]

Hi Sahil,

 

One more request if you are kind, please.

How can I make cursor like this with the transform on mousedown. See this example:

https://www.rainforestfoods.com/experience/#!/slide-water

 

Thank you very much!

[Sahil]

Unfortunately, I recently had some issues with my system and I am yet to completely restore it. So I won't be able to edit svgs. following is similar thread and there is example you can use.

 

 

So basically you hide your mouse cursor and use element as cursor, that site is setting css property 'pointer-events' to none so you can click through the cursor element. You can use polyfill for it.

 

Following is another thread you might want to take a look at.

 

 

Finally, that mousedown animation is simple. Those arrows are hidden, so their opacity is turned to 1 from 0 and circle is scaled up. Hope that helps.