hwthorn/parallaxify

Opposite parallax?

emmadalby opened this issue · 8 comments

emmadalby commented

Hi!

This is a great plugin and I have it all working which is good but at the moment the image I have the parallax on is moving TOWARDS the mouse at the moment and I want it to move AWAY from the mouse move (like in the opposite direction) if you get me?

Is this possible? And if so, how do I go about doing it as I am at a total loss...

Any help would be greatly appreciated.

Thank you.

hwthorn commented
  • 👍1
yeomann commented

Replied you on email already emma, not exactly it goes with opposite direction. but i think try this to get some idea http://jsfiddle.net/X7UwG/854/ and maybe you can achieve with this plugin as well.

  • 👍1
emmadalby commented

Thanks for the help guys. It's sorted now and looks great! :)

julianpinedayyz commented

@emmadalby How did you sort it out? Care to share? ;)

julianpinedayyz commented

Thanks to a previos ticket, here's the code:

  // defining your own positioning function
  $.parallaxify.positionProperty.inverted = {
      setPosition: function($element, left, originalLeft, top, originalTop) {
        $element.css('transform', 'translate(' + (originalLeft - left) + 'px, ' + (originalTop - top) + 'px)');
      }
  };
  // using your own positioning function
  $('#parallax').parallaxify({
      positionProperty: 'inverted',
      responsive: true,
      motionType: "natural",
      mouseMotionType: "gaussian",
      motionAngleX: 90,
      motionAngleY: 90,
      alphaFilter: 0.5,
      adjustBasePosition: true,
      alphaPosition: 0.025
  });
emmadalby commented

Hi @miroamarillo

Sorry, only just seen this. I just used negative values instead of positive ones as suggested above by @hwthorn

Worked great.

julianpinedayyz commented

@emmadalby Thanks!

  • 👍1
emmadalby commented

No problem 😊