Docs

[speester]

What i want to achieve
http://themes.themegoods2.com/?theme=GrandRestaurant

What i got
https://thekitchentrainer.com.sg/lose-it-woman/

Issue
1) In order for me to show both images. i have to add a row with gap of 1500px. While it has the effect of what i want. But it requires the user to scroll “too much”
2) I think the solution lies in the parallax speed. how do i edit it ?

I tired installing smoot scrolling, does not help much.

Thanks !

[Christian]

Hey there,

There is no setting for parallax speed as the display relies on the background and the content’s height. Please try reducing the gap.

Thanks.

[speester]

When i reduce the gap. it wont show the second image (its a long image, there are 2 images in one long image, one on top one at the bottom)
https://thekitchentrainer.com.sg/wp-content/uploads/2016/06/222.png

So, i cannot achieve whats done here?
http://themes.themegoods2.com/?theme=GrandRestaurant

Is this code a working code? I tried nothing changed.

https://community.theme.co/forums/topic/parallax-background-speed/

To change the speed, you can simply use following jQuery code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function() {

//
// Attach parallax handlers.
//

if (Modernizr.touch) {
jQuery(‘.x-content-band.bg-image.parallax, .x-content-band.bg-pattern.parallax’).css(‘background-attachment’, ‘scroll’);
} else {
jQuery(‘.x-content-band.bg-image.parallax’).each(function() {
var id = jQuery(this).attr(‘id’);
jQuery(‘#’ + id + “.parallax”).parallaxContentBand(‘50%’, 0.3);
});
jQuery(‘.x-content-band.bg-pattern.parallax’).each(function() {
var id = jQuery(this).attr(‘id’);
jQuery(‘#’ + id + “.parallax”).parallaxContentBand(‘50%’, 0.5);
});
}

});
By changing 0.3 and 0.5 to your desired speed from 0 to 0.9 (default speed is 0.1 and 0.3).

[speester]

http://themes.themegoods2.com/?theme=GrandRestaurant

If you scroll down to the menu area, and do some window resizing, you can see it’s very mobile responsive.

How can i achieve this ?

[Joao]

Ho Nelson,

The many difference is between your setup and the website you sent as reference is that actually those images on the backgrounds are not One Background image like on your website, they are in fact two columns side by side but one is overlay the other

On column has some padding while the other doesn´t and that is why they are not side by side.

This layout tricks are not applied on mobile and that is why the website stacks perfectly like it will do naturally in X if you set images side by side.

If you set your columns 1/2 + 1/2 with your images on one column and description on other we may be able to assist you to achieve something similar.

Hope that helps,

Joao

[Author]

Posts