javascript - How to align the parallax to the middle of a div? -


i created parallax effect use mouse coordinates move. effect working, can't red box position horizontal , vertically centered of parent div, parallax active around red box , within parent div - whatever factor used parallax:

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 = (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

hope can me out!

update

enter image description here enter image description here

nice parallax. if mean want center red box margin: 0 auto needed.

.icon {     height: 150px;     width: 150px;     display: block;     background: red;     margin: 0 auto; } 

Comments