- This topic has 9 replies, 3 voices, and was last updated 12 months ago by
David.
-
AuthorPosts
-
January 22, 2020 at 6:10 pm #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?
January 22, 2020 at 9:45 pm #1140936Leo
StaffCustomer SupportHi there,
Try this:
https://generatepress.com/forums/topic/site-background-parallax-effect-to-body/#post-350945Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 23, 2020 at 12:32 pm #1141887Martin
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…
January 23, 2020 at 1:05 pm #1141903Leo
StaffCustomer SupportCan 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/January 23, 2020 at 2:41 pm #1141983Martin
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! πJanuary 23, 2020 at 4:20 pm #1142059Leo
StaffCustomer SupportI’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/January 23, 2020 at 5:08 pm #1142090Martin
I have a local site on my Mac. Do you have a way of sharing?
January 24, 2020 at 7:50 am #1142726David
StaffCustomer SupportHi 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/January 25, 2020 at 9:52 am #1143884Martin
Not right now. I’ll talk to my client to see if they really need parallax.
January 25, 2020 at 10:17 am #1143906David
StaffCustomer SupportLet us know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.