Help with parallax

[jquinn33]

Hi! I’m trying to do an affect similar to the one on this site, where it appears the images are stationary and the content sections are rolling over the images. I’ve been working with parallax sections but can’t seem to figure it out.

https://greenofficespace.ca/

Is it possible to achieve this effect using Pro?

Thank you for any guidance!

[tristup]

Hi @jquinn33,

Thanks for reaching out.
You need to set the Scale for the Parallax. I have created a Test* page and set the background image to the section with parallax, which creates a similar effect.

I would suggest you check the page and replicate it wherever you required it.

Thanks

[jquinn33]

Thank you, Tristup. I had tried this, but the problem is that at that scale, it zooms in so far, I can’t see most of the photo. Is there a solution that would allow me to use parallax without losing the width of the photo? I got the closest setting up a “classic” section, but wasn’t sure if there was a way using a normal section. Thank you again!

[prakash_s]

Hello @jquinn33,

You need to decrease the scale value to get rid of the image zoom. After decreasing the scale value please clear your browser cache then check it again.

Hope it helps
Thanks

[jquinn33]

Thank you, Prakash. When I decrease the scale, then I lose the full parallax scroll effect, like the one on this site: https://greenofficespace.ca/. In other words, I see more of the image in the parallax section, but it moves only slightly as I scroll. Is it possible to achieve the same effect as in the site mentioned? Thank you again!

[friech]

Hi @jquinn33,

Thank you for writing in, that is possible but you need a little bit of custom CSS.

First, turn off the parallax effect on your background-image, and make sure your background-image is set on the lower layer.

Then add this to your section’s Element CSS area.

$el .x-bg-layer-lower-image {
  background-attachment: fixed;
}

background-attachment - CSS Reference

Please note that the code provided above serves as a guide only and it would ultimately be your responsibility to take it from here. If you are unfamiliar with code and resolving potential conflicts, you may opt-in on our One service for further assistance.

Cheers,

[jquinn33]

FRIECH! You are amazing!! This worked beautifully. THANK YOU so much! This was something I had wanted to do on a couple other sites in the past and couldn’t figure out. I appreciate your help very much!!

[prakash_s]

You are most welcome @jquinn33