[Support request] Making page header move

Hi there,

Where are you adding the hooks?

Have you added the CSS as well? Don’t think I’m seeing them.

Let me know.

Hi there, try targeting the ID of the pageheader in your script, in the link provided it is:

#page-header-21

Hi David, ok so first off try replacing all $ instances with jQuery – and if still an issue move the code to wp_foot

Hi David try this:

<script>
jQuery(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / jQuery(window).height();
var width = movementStrength / jQuery(window).width();
jQuery("#page-header-21").mousemove(function(e){
          var pageX = e.pageX - (jQuery(window).width() / 2);
          var pageY = e.pageY - (jQuery(window).height() / 2);
          var newvalueX = width * pageX * -1 - 25;
          var newvalueY = height * pageY * -1 - 50;
          jQuery('#page-header-21').css("background-position", newvalueX+"px     "+newvalueY+"px");
});
});
</script>

OK – we need to load jQuery. So add this snippet, heres how, i would recommend the code snippets plugin:

https://docs.generatepress.com/article/adding-php/

add_action( 'wp_enqueue_scripts', 'tu_load_jquery' );
function tu_load_jquery() {
    wp_enqueue_script( 'jquery' );
}

Glad we got there!

You can replace the two instances of the #page-header-21 with .generate-content-header