Parallax on Body Background Image

[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?

[Leo]

Hi there,

Try this:
https://generatepress.com/forums/topic/site-background-parallax-effect-to-body/#post-350945

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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…

[Leo]

Can you try that in wp_footer hook?

That’s usually where js would go.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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! 🙂

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Martin]

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

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Martin]

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

[David]

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts