Css3 let the div shake as the mouse moves

I recently found a website with a good user experience, especially when some background images move backward with the mouse, so I tried to write a demo to imitate it.

Http://www.kennedyandoswald.com /#! /Failure-intro-a-poem

 Insert title here<script type="text/javascript">var items = document.getElementsByClassName("layer");document.addEventListener('mousemove', function (evt){var x = evt.clientX;var y = evt.clientY;//console.log(x);var winWidth = window.innerWidth;var winHeight = window.innerHeight;var halfWidth = winWidth / 2;var halfHeight = winHeight / 2;var rx = x - halfWidth;var ry = halfHeight - y;var length = items.length;var max = 30;for (var i = 0 ; i < length ; i++) { var dx = (items[i].getBoundingClientRect().width/max)*(rx / -halfWidth);var dy = (items[i].getBoundingClientRect().height/max)*(ry / halfHeight); items[i].style['transform'] = items[i].style['-webkit-transform'] = 'translate('+dx+'px,'+dy+'px)';} }, false);</script>

The length and width of each div are obtained, and the appropriate offset relative to the window is calculated proportionally. max is the maximum offset between the left and right of each div.

Effect display