[Support request] Making page header move

Home Forums Support [Support request] Making page header move

Home Forums Support Making page header move

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #602765
    David

    Hello

    I’m trying to get the page header to move slightly on rollover like this…

    https://codepen.io/onurburak9/pen/oxKMQq

    I’ve added the javascript via the GP hooks but can’t get it to work.

    Can someone please help with this?

    This is the website…

    http://185.20.51.60/~ejsaero/

    Thanks
    Dave

    GeneratePress 2.1.2
    #602996
    Leo
    Staff
    Customer Support

    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.

    #603247
    David

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

    #603407
    David
    Staff
    Customer Support

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

    #page-header-21

    #603414
    David

    Hi David

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

    Any other ideas??

    Thanks
    Dave

    #603416
    David
    Staff
    Customer Support

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

    #603426
    David

    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>

    #603429
    David
    Staff
    Customer Support

    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>
    #603431
    David

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

    #603443
    David
    Staff
    Customer Support

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

    That’s done it 🙂 Thank you so much!

    #603454
    David
    Staff
    Customer Support
    #603456
    David

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

    #603461
    David
    Staff
    Customer Support

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

    #603466
    David

    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/

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.