css3让div随鼠标移动而抖动起来

当前位置 : 首页 > 网页制作 > CSS > css3让div随鼠标移动而抖动起来

css3让div随鼠标移动而抖动起来

来源: 作者: 时间:2016-01-28 09:27
最近发现一个网站,感觉用户体验不错,特别是一些背景图片随着鼠标的移动的反向的移动,感觉跟不错,于是就试着写了个小demo模仿一下http: www kennedyandoswald com ! failure-intro-a-poemInse

最近发现一个网站,感觉用户体验不错,特别是一些背景图片随着鼠标的移动的反向的移动,感觉跟不错,于是就试着写了个小demo模仿一下


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>

说明一下分别拿到每个div的长度和宽度,通过比例算出相对于窗口的合适的偏移量,max是每个div左右偏移最多不超过的值


效果展示


Tag:
网友评论

<