我创建了一个视差效果,它将使用鼠标坐标来移动。效果是有效的,但是我不能让红色框的位置在父div的水平和垂直居中,所以视差在红色框周围和父div内是活动的-无论视差使用什么因子:
function mouseMove(event) {
var target = $(this);
var dot = target.find('.pointer');
var height = dot.height();
var width = dot.width();
var offset = target.offset();
var w = target.width();
var h = target.height();
var top = offset.top;
var left = offset.left;
var mX = (event.pageX - left) - width / 2;
var mY = (event.pageY - top) - height / 2;
TM.to(dot, 1, { x: mX, y: mY, scale: 1, ease: Quint.easeOut, force3D: !0 });
var icon = $('.icon');
var iWidth = icon.width();
var iHeight = icon.height();
var factor = .05;
var x = ((event.pageX - left) - (iWidth / 2)) * factor;
var y = ((event.pageY - top) - (iHeight / 2)) * factor;
TM.to(icon, 1, { x: x, y: y, scale: 1, ease: Quint.easeOut, force3D: !0 });
};
http://codepen.io/anon/pen/oLQWOG
更新
发布于 2016-08-08 23:07:54
不错的视差。如果您的意思是想要居中红色方框,那么margin: 0 auto
就是您需要的全部。
.icon {
height: 150px;
width: 150px;
display: block;
background: red;
margin: 0 auto;
}
https://stackoverflow.com/questions/38832495
复制相似问题