0

I created a parallax effect that will use the mouse coordinates to move. The effect is working, but I can't get the red box position horizontal and vertically centered of the parent div, so the parallax is active around the red box and within the parent div - whatever factor is used for the 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 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

Update

enter image description here

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
Caspert
  • 4,271
  • 15
  • 59
  • 104
  • Add `margin: 0 auto;` to the `.icon` css. (http://codepen.io/anon/pen/JKZJKA) – user3297291 Aug 08 '16 at 15:01
  • It should be in the center of the parent, but when I position my mouse dot between the left side and red box and the right side and the box the space between is not equal to both... How to fix this? – Caspert Aug 08 '16 at 15:05
  • use Flex CSS3 http://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically – kollein Aug 08 '16 at 15:05
  • General advice stays the same: take care of initial centering in CSS (stackoverflow has many good answer on how to do this, I'd recommend using `display: flex`, `align-items: center` and `justify-content: center`). Then, take care of relative positioning in JS – user3297291 Aug 08 '16 at 15:06

1 Answers1

0

Nice parallax. If you mean you want to center the red box margin: 0 auto was all you needed.

.icon {
    height: 150px;
    width: 150px;
    display: block;
    background: red;
    margin: 0 auto;
}
Pardeep Dhingra
  • 3,916
  • 7
  • 30
  • 56
ALFmachine
  • 639
  • 7
  • 12
  • It should be in the center of the parent, but when I position my mouse dot between the left side and red box and the right side and the box the space between is not equal to both... Do you know why? See update of my question for screenshots. – Caspert Aug 08 '16 at 15:14