- This topic has 9 replies, 3 voices, and was last updated 4 years, 2 months ago by David.
-
AuthorPosts
-
January 22, 2020 at 6:10 pm #1140851Martin
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 #1140936LeoStaffCustomer SupportJanuary 23, 2020 at 12:32 pm #1141887MartinI 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 #1141903LeoStaffCustomer SupportCan you try that in
wp_footer
hook?That’s usually where js would go.
January 23, 2020 at 2:41 pm #1141983MartinI 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 #1142059LeoStaffCustomer 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 π
January 23, 2020 at 5:08 pm #1142090MartinI have a local site on my Mac. Do you have a way of sharing?
January 24, 2020 at 7:50 am #1142726DavidStaffCustomer SupportHi there,
are you able to move the site to a host temporarily ?
January 25, 2020 at 9:52 am #1143884MartinNot right now. I’ll talk to my client to see if they really need parallax.
January 25, 2020 at 10:17 am #1143906DavidStaffCustomer SupportLet us know π
-
AuthorPosts
- You must be logged in to reply to this topic.