• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Adding a scrolling effect to parallax in Cafe Pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding a scrolling effect to parallax in Cafe Pro

This topic is: not resolved

Tagged: cafe pro, mobile, parallax, scrolling

  • This topic has 2 replies, 1 voice, and was last updated 6 years, 10 months ago by David E.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • May 4, 2016 at 3:11 pm #184988
    David E
    Member

    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/
    May 5, 2016 at 12:17 pm #185042
    David E
    Member

    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.

    May 23, 2016 at 5:03 pm #186156
    David E
    Member

    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
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble