Adding a scrolling effect to parallax in Cafe Pro

[David E]

Using Cafe Pro, the combination of Parallax Pro and Cafe themes. It would be nice to have the added touch of the scrolling background effect from Parallax Pro. Is there a tutorial available for this, or code snippets to use?

I've experimented with various bits of code from other Genesis Forum entries, but have found nothing with the proper context or complete solution.

Any help available would be appreciated.

http://www.jacksonharborsoup.com/site/ (work in progress)

http://www.jacksonharborsoup.com/site/

[David E]

Amended a solution by adding some javascript to the home.js file. Simply inserted the specified css class provided by Cafe Pro's css file for the appropriate section(s), tweaked the values to produce the desired effect.

The original js solution that I used can be found at: http://callmenick.com/post/advanced-parallax-scrolling-effect.

[David E]

So, the effect appears to work perfectly in desktop viewing.

However, in mobile viewing the image sections behave differently. A space appears between the bottom of the background image and the bottom of the section.

Looking at the page code (Chrome > Inspect) I find that the div element has an inline style with background-position: 50% ____px (with the px amount changing as page scrolls). I'm guessing that this inline style is being generated due to the code I added to the home.js file. If I change the px amount to 0 in Inspect, I can temporarily make the image fill the entire background of the section.

However, adding this change to the style.css file makes no impact on the page and it continues to render with the space between the bottom of the background image and the bottom of the section. Again I'm guessing here, but it seems likely that the style.css file is being overridden by the inline style of the element.

If this is the case that the inline is overriding the style.css file, and if so that it is being generated by the home.js file, then I'm wondering if anyone can help me identify a solution to do one of the following:

1) Edit the appropriate file to force the background image to fill the entire space in mobile view.

or

2) Turn off the scrolling effect in mobile view.

Can anyone provide their solution to this? Thanks in advance!

[Author]

Posts