Parallax 3d effect with mouse reaction

How to import code

To make a 3D effect, it’s not always required to use 3d blocks in wordpress. You can use the special option in the browser to set Z space. It’s working effectively in combination with some other animated options like Mouse move and Scroll interpolation.

The latest Greenshift update makes this even faster. Just enable Mouse type in Animation panel of any block of Greenshift.

Anyway, there are a few important things which you should know about 3d space in browser, usually, people don’t take attention on them and fail to build 3d effects. Fortunately, Greenshift will setup everything for you automatically, but still you need to take attention to some points

Overflow Hidden

This option will kill 3d space. So, if you want to hide overflowed parts (you will have them if you use rotation in 3d space), do not add overflow hidden on block where you put rotation. Do this on parent block

Perspective option

If you build any kind of 3d effect, you must set perspective option. In Greenshift, you can do this in Advanced – CSS Transformation. More bigger you set perspective, more strong 3d effect you will have. Reasonable values are around 500-1000. If you use Mouse animation in GS, you don’t need to set perspective, plugin will do this for you, but if you want, you can set own perspective value

Transform Style – preserve-3d

In the browser, each layer has its context. This means that if you have a layer with a direct child, then, everything is working perfectly if you set perspective to the parent layer. But if you add 2 levels of children, then perspective stops working as expected. You may see a 3d effect, but it will be a bit flat. So, you need to add transform-style: preserve-3d on each layer which has inner layers. Again, in Greenshift, once you enable mouse animations, the plugin will do this for you so you don’t need to worry. But if you build your own effects, make sure that you have this option enabled in Advanced – CSS Transform

Translate Z/Shift Z

This option will affect the position in z space. More bigger the value, more closer it will be to the camera. Sometimes you need to animate x/y axis but keep the item in Z space. For example, we have such falling leaves on the demo page. In this scenario, put block into another container, then set Shift Z and position and add animation to inner element.