The official homepage of the Hammer Technology special effects

Some time ago colleagues told me that the hammer technology home effect is very stunning, let me see, I saw really cool http://www.smartisan.com.

Check on the Internet, some people say it is the plugin https://github.com/ariona/hover3d, but I do not go on GitHub on this side can not be verified.

Also found is used parallax this plug-in, check the next really http://www.htmleaf.com/Demo/201508152420.html, but Parallax only achieve the picture level sense of visual difference effect, Hammer Technology's homepage effects also have a transform effect that changes shape with the mouse position.

I found a netizen wrote about this special effect of the demo, please see https://imnerd.org/lab/mousemove3d.html, we can use the background tool to see the original code, I put it here

var origin = {X:DOCUMENT.BODY.CLIENTWIDTH/2, y:document.body.clientheight/2}, o = Document.queryselector ('. Cover ');    Document.addeventlistener (function(e) {        var rotate = {X:e.pagey/origin. Y-1, y:1-e.pagex/origin. Y};         var transform = "Rotatex (" +rotate.x*10+ "deg) Rotatey (" +rotate.y*10+ "deg)";         = transform;         = transform;    });

The core of which is

var rotate = {X:e.pagey/origin. Y-1, Y:1-e.pagex/origin. Y};

var transform = "Rotatex (" +rotate.x*10+ "deg) Rotatey (" +rotate.y*10+ "deg)";

In these two lines, origin is the coordinates of the center point of the container, the ratio of the mouse real-time y-coordinate and the center-point y-coordinate-1, appended to the Rotatex of the element o to change (result multiplied by 10 plus deg), Rotatey is reversed, 1 minus the mouse real-time x-coordinate and center point x-coordinate ratio And bind these to the O MouseMove event.

Finally, the Parallax visual difference and the above code together can realize the effect of the Hammer technology homepage

The official homepage of the Hammer Technology special effects