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.

Hook for the javascript is in wp-head.

I've added this to the child theme css...
.generate-content-header {
background-size: calc(100% + 50px);
}

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

#page-header-21

Hi David

I've tried this but the movement i'snt showing.

Any other ideas??

Thanks
Dave

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

I've moved this to wp_footer, but still not working...

<script type="text/javascript">
jQuery(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / jQuery(window).height();
var width = movementStrength / jQuery(window).width();
jQuery(".top-image").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>

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>

Still not working - can I send you the admin logins privately, so you can double check?

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' );
}

That's done it :) Thank you so much!

Glad we got there!

Is there an easy way to add it to all page headers, rather than me adding every page header ID?

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

Great - last question...

The color overlay doesn't go to the bottom now, is there anything I can do via CSS to change this?

http://185.20.51.60/~ejsaero/