- This topic has 13 replies, 2 voices, and was last updated 3 years, 3 months ago by Elvin.
-
AuthorPosts
-
July 17, 2017 at 10:57 am #350743Veronica
Hi Tom,
Sorry if this is a simple question; maybe I am just missing it somewhere. I searched the forums, but didn’t find an answer.
I want the body background (i.e., the entire site, not sections) to have the parallax effect. Where do I do this? Is it as simple as adding the .parallax-enabled class to the body? If so, what would the code be for this?
I love your theme, thank you SO much for all you’ve done!
July 17, 2017 at 8:03 pm #350945TomLead DeveloperLead DeveloperHi Veronica,
You could try adding something like this into the wp_footer hook in GP Hooks:
<script> function body_parallax_element( selector, context ) { context = context || document; var elements = context.querySelectorAll( selector ); return Array.prototype.slice.call( elements ); } window.addEventListener( "scroll", function() { var scrolledHeight= window.pageYOffset; body_parallax_element( "body" ).forEach( function( el, index, array ) { var limit = el.offsetTop + el.offsetHeight; if( scrolledHeight > el.offsetTop && scrolledHeight <= limit ) { el.style.backgroundPositionY = ( scrolledHeight - el.offsetTop ) / 2 + "px"; } else { el.style.backgroundPositionY = "0"; } }); }); </script>
July 18, 2017 at 7:45 am #351183VeronicaThat works great, thanks!!
July 18, 2017 at 9:02 am #351227TomLead DeveloperLead DeveloperYou’re welcome ๐
July 23, 2017 at 12:52 am #353423RalfHi Tom
that’s what i also was looking for – great ! … but when i want the background to move during the parallax effect … is that possible somehow ? … thxJuly 23, 2017 at 9:59 am #353555TomLead DeveloperLead DeveloperThat code should move the body background image as you scroll down.
August 6, 2019 at 3:09 pm #977553DanielHi. I used this code on one site, and it works! But the movement looks jerky. Is there a way to make it smoother? Thanks!
August 6, 2019 at 3:18 pm #977555DanielI think a “Parallax control” in the “Customizer > Background Images” section would be nice ๐
August 6, 2019 at 5:09 pm #977614TomLead DeveloperLead DeveloperThe jerky-ness of it might be browser-specific. I’d need to see your site to know for sure ๐
August 8, 2019 at 5:07 pm #979446DanielThank you for your reply Tom. The site was required with urgency and is now online. I don’t want to make tests on it. Maybe I make a test page later, because it’s a common need.
Thanks again.December 22, 2020 at 9:21 pm #1591502KumaraTom, thanks so much for this! Would there be a way to apply this to #page rather than body?
December 22, 2020 at 9:27 pm #1591503ElvinStaffCustomer SupportTom, thanks so much for this! Would there be a way to apply this to #page rather than body?
You can try using the same code but replace the indicated selector
"body"
in this line:
body_parallax_element( "body" ).forEach...
With
"#page"
, which will look something like this:
body_parallax_element( "#page" ).forEach...
December 22, 2020 at 9:41 pm #1591515KumaraThanks so much Elvin!
I’ve added this to but I’m now getting a blank screen. Any chance this would conflict with a header element image with parallax already applied?
December 22, 2020 at 9:47 pm #1591520ElvinStaffCustomer SupportIโve added this to but Iโm now getting a blank screen. Any chance this would conflict with a header element image with parallax already applied?
That may be it.
Try creating a new function:
Example:
function page_parallax_element( selector, context ) { context = context || document; var elements = context.querySelectorAll( selector ); return Array.prototype.slice.call( elements ); } window.addEventListener( "scroll", function() { var scrolledHeight= window.pageYOffset; page_parallax_element( "#page" ).forEach( function( el, index, array ) { var limit = el.offsetTop + el.offsetHeight; if( scrolledHeight > el.offsetTop && scrolledHeight <= limit ) { el.style.backgroundPositionY = ( scrolledHeight - el.offsetTop ) / 2 + "px"; } else { el.style.backgroundPositionY = "0"; } }); });
You can try testing this out. Let us know how it goes.
-
AuthorPosts
- You must be logged in to reply to this topic.