How to make moving background header cover image - mouse moving effect

Hi there,

You'll have to use some custom code. There's a lot of examples out there:

https://codepen.io/chrisboon27/pen/rEDIC
https://codepen.io/vajkri/pen/grgQmb
https://codepen.io/timjackleus/pen/BKWKEX
https://stackoverflow.com/a/19424567
https://gist.github.com/glen7/d28dfcde688ed84f9a7393b4c1f2331a

Hope this helps :)

Tom,

I tried a couple of them earlier but i did not have the results with them.

I have targeted .generate-content-header, and i wrote JS in the wp_footer hook.

Maybe i am doing something wrong?

Thanks

Nikola

I'm not seeing any JS for it on the page - can you add it back so I can take a look?

Ok, take a look now.

Where did you add it? I'm having trouble spotting it.

In the wp_footer hook.

<?php if ( is_page( 'post-2' ) ) : ?>
    <script>
        var lFollowX = 0,
    lFollowY = 0,
    x = 0,
    y = 0,
    friction = 1 / 30;

function moveBackground() {
  x += (lFollowX - x) * friction;
  y += (lFollowY - y) * friction;
  
  translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

  $('.generate-content-header').css({
    '-webit-transform': translate,
    '-moz-transform': translate,
    'transform': translate
  });

  window.requestAnimationFrame(moveBackground);
}

$(window).on('mousemove click', function(e) {

  var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
  var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
  lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
  lFollowY = (10 * lMouseY) / 100;

});
moveBackground();
    </script>
<?php endif; ?>

That code is targeting yourwebsite.com/post-2, which doesn't exist.

Yea, stupid mistake. :)

But, still not working. :/

In your code, try replacing $ characters with jQuery.