Create “True” Parallax Effect

  • Resolved ripei

    (@ripei)


    9 years, 7 months ago

    I have been using this plugin with the Talon template.
    Something I did not notice immediately was that SiteOrigin does not provide a “true” parallax effect. What I mean is that the background-image position is moved a little bit to create somewhat of a parallax effect. However, it does not create the effect as if the background-image was “sticking” to the page.
    Compare these two parallax effects:
    SiteOrigin with Talon Theme: Talon (See the background-image of the chair)
    “True” Parallax Effect example: Himalayas (See the Background image of the Himalayas)

    Is there a way to improve the parallax effect of Siteground in a similar way?

    • This topic was modified 9 years, 7 months ago by ripei.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Luke Cavanagh

    (@lukecavanagh)

    9 years, 7 months ago

    @ripei

    Have you read either of these two posts.

    https://siteorigin.com/thread/how-to-add-parallax-scrolling-to-a-page-builder-row/
    https://siteorigin.com/thread/creating-parallax-effect/

    Plugin Contributor alexgso

    (@alexgso)

    9 years, 7 months ago

    Hi ripei,

    So it looks like you’re actually after a fixed background rather than a parallax. For a comparison, please refer to this page. To clarify, Parallax is a motion effect while a fixed background is static regardless of where you’re viewing it from. I’m going to log fixed backgrounds as a feature request so it’s easier to do in the future.

    To add a fixed background effect to your background image, please open up the row / widget styles. Head over to the design settings group and set the Background Image Display to Cover. Open the Attribute settings group and add the following CSS:

    background-attachment: fixed;

    If desired, increase the overall height of the row by adding the following CSS on the next line:

    height: 500px;

    Let me know if this works for you. If not, could you please send me a link to where you’ve applied this CSS so I can inspect the results?

    Thread Starter ripei

    (@ripei)

    9 years, 7 months ago

    Who would have guessed that things can be so easy.
    For some reason I understood these two display-types both to be parallax effects.
    Thank you (both) very much! 🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Create “True” Parallax Effect’ is closed to new replies.