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
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
Post a Comment