- This topic has 8 replies, 3 voices, and was last updated 3 years, 8 months ago by
Tom.
-
AuthorPosts
-
August 19, 2017 at 8:23 am #369332
Mark
Hey,
i use the parallax effect on section backgrounds. Till i updated, everything worked fine, but since, the parallax effect doesn’t “start” till the section hits the top of the window.
You can see an example here: parallax example
I tried deactivating all other plugins, but that doesn’t help.
Could use some help here. π
GP Premium 1.4.3August 19, 2017 at 10:20 am #369393David
StaffCustomer SupportThis is not a bug its just Parallax simply scrolls the background at a slower rate to the screen.
You dont have enough screen above it to work correctly.
Parallax at the top of the page really requires a bigger image – full screen is best.If you were to apply it to the section further down the page you would see the effect.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 19, 2017 at 10:30 am #369398Tom
Lead DeveloperLead DeveloperThis is an intended feature in 1.4.
Before the update, backgrounds would begin moving immediately, even if the section was at the bottom of the page. This resulted in the image repeating in some cases, as by the time you reached the section, the entire image had already scrolled.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 19, 2017 at 10:54 am #369411Mark
Thanks for the fast reply.
Yeah, I read about the changes to the parallax scrolling in the related threads. Great work btw. π
In the given example, both of the sections with background pictures have parallax scrolling enabled. If u watch carefully, you will see, that the parallax effect will start as soon as the section starts to “vanish” at the top of the browser window.
I hope you understand what i’m trying to describe π
August 19, 2017 at 11:04 am #369415Tom
Lead DeveloperLead DeveloperHmm, it starts to move as soon as the image hits the top of my screen: https://www.screencast.com/t/7cWowvaA6YB
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 20, 2017 at 3:25 am #369731Mark
Yes, thats exactly what i mean. I edited the sample page to make it more obvious. In my understanding, the parallax effect you implemented (background scrolling at a different speed) should start as soon as the picture is visible. >like here<
At least, thats how it worked on my page prior to the update and the way it workes in the sample video on the GP page.But maybe thats just the way it should work now. π
August 20, 2017 at 10:53 am #369927Tom
Lead DeveloperLead DeveloperAs of 1.4, the parallax script will only kick in once the image hits the top of the screen – this is the only way to prevent the bug I mentioned earlier.
Unfortunately it’s much harder/not great for performance to constantly check if something is inside the viewport. It is possible to switch back to the old script if you’d rather use that?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 20, 2017 at 11:00 am #369932Mark
Ah ok, good to know and thanks for the info!
If there is an easy way to use the old script, i would like to know how i could use it. If not, no problem.
I just thought there was something wrong. Thank you for the clarification. π
August 20, 2017 at 11:38 pm #370176Tom
Lead DeveloperLead DeveloperGive this a try:
add_action( 'wp_enqueue_script', 'tu_switch_page_header_parallax', 15 ); function tu_switch_page_header_parallax() { wp_dequeue_script( 'generate-page-header-parallax' ); wp_add_inline_script( "jquery", "function generateHeaderParallax() { // Disable on mobile var mobile = jQuery( '.menu-toggle' ); if ( mobile.is( ':visible' ) ) return; // Only run the function if the setting exists if ( ! jQuery('.generate-page-header.parallax-enabled')[0] ) return; // Page Header element if ( jQuery('.page-header-contained')[0] ) { var $this = jQuery( '.generate-page-header.parallax-enabled .inside-content-header' ); } else { var $this = jQuery( '.generate-page-header.parallax-enabled' ); } var x = jQuery(this).scrollTop(); var speed = jQuery('.generate-page-header.parallax-enabled').data('parallax-speed'); return $this.css('background-position', 'center ' + parseInt(-x / speed) + 'px'); } jQuery(document).ready(function($) { if ( jQuery('.generate-page-header.parallax-enabled')[0] ) { // Initiate parallax effect on scroll for our page header $(document).scroll(function() { generateHeaderParallax(); }); } });" ); }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.