🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Support request] Parallax on Body Background Image

Home Forums Support Parallax on Body Background Image

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1140851
    Martin

    I’m using GeneratePress premium and have a background image in the body on which I would like to add the parallax effect. Can you help me or recommend a tutorial on how to do this?

    #1140936
    Leo
    Staff
    Customer Support
    #1141887
    Martin

    I found that a bit jerky. Due to flickering… What about some javascript like this parallax.js being used on the icasc.ca site I’m trying to emulate:

    
    /* 
     * Parallax effect
     */
    jQuery(document).ready(function(){
    	// Cache the Window object
    	jQuerywindow = jQuery(window);
                    
       jQuery('.main-container[data-type="background"]').each(function(){
         var jQuerybgobj = jQuery(this); // assigning the object
                        
          jQuery(window).scroll(function() {
                        
    		// Scroll the background at var speed
    		// the yPos is a negative value because we're scrolling it UP!								
    		var yPos = -(jQuerywindow.scrollTop() / jQuerybgobj.data('speed')); 
    		
    		// Put together our final background position
    		var coords = '100% '+ yPos + 'px';
    
    		// Move the background
    		jQuerybgobj.css({ backgroundPosition: coords });
    		
    }); // window scroll Ends
    
     });	
    
    }); 
    /* 
     * Create HTML5 elements for IE's sake
     */
    document.createElement("section");
    

    I tried this in a wp_head hook in GP for the entire site but nothing happened? I’m probably not implementing this right…

    #1141903
    Leo
    Staff
    Customer Support

    Can you try that in wp_footer hook?

    That’s usually where js would go.

    #1141983
    Martin

    I got the same problem. It just prints the code at the bottom of the page but doesn’t execute it. I checked off ‘execute php’ but no effect.

    I got this code from the inspector in my web browser while inspecting the icasc.ca site. Do you think I need to link the parallax.js file instead somehow?

    I’m now looking at tutorials on including parallax.js https://pixelcog.github.io/parallax.js/ and https://tutorialzine.com/2019/06/the-easiest-way-to-create-parallax-scrolling-with-simple-parallax

    The second link above suggested adding:

    
    <script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.2.0/dist/simpleParallax.min.js"></script>
    var image = document.getElementsByClassName('thumbnail');
    new simpleParallax(image);
    

    Which I did to the wp_head but then realized that I cannot target my GP background image with a class like they did here with ‘thumbnail’

    Any suggestions? Sorry I’m having a bit of trouble.
    (btw I’m located in Vancouver right across the straight from you! 🙂

    #1142059
    Leo
    Staff
    Customer Support

    I’ve asked Tom to check his previous code and he said it still looks good to him.

    Can you apply it so we can see what’s causing the jerky-ness?

    We can’t really help with solutions from other places.

    Let me know 🙂

    #1142090
    Martin

    I have a local site on my Mac. Do you have a way of sharing?

    #1142726
    David
    Staff
    Customer Support

    Hi there,

    are you able to move the site to a host temporarily ?

    #1143884
    Martin

    Not right now. I’ll talk to my client to see if they really need parallax.

    #1143906
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.