Parallax Effect in X Pro

[gregorylmartin]

Is there a way to get a Parallax effect that doesn’t zoom into the picture?

I can’t find a way to make X Theme’s parallax effect do that.

I’d like a parallax effect exactly like the one at the bottom of this site: http://masterpoolsguild.com/.

If anybody knows how to do that I’d love to know.

P.S. adjusting the lower layer size just zooms in on the background picture which is not what I want to do.

[ruenel]

Hello @gregorylmartin,

Thanks for writing in!

The usual parallax background image moves as you scroll the page. Do you want the image just stay in place? If that is the case, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-section [class^="x-bg"][data-x-params*="parallax"] {
    background-attachment: fixed;
}

We would loved to know if this has work for you. Thank you.

[gregorylmartin]

Finally! Thank you!

For others reading this I’ll explain exactly what I did.

I enabled Parallax for the Lower Layer in my section (where the background image is).

I adjusted the Parallax setting to 100 rather than 150 where it starts. All 150 does is zoom into the image which I have no idea why anybody would want.

Next I used the css in the previous message in this thread, but I changed the class to what I had specified my section’s class to be.

After that, I had a parallax section working the way I think it should. If others in the X Community like the way the default Parallax works, great. I just think this is much better.

Thanks again!

[christian]

Glad it helped, @gregorylmartin.

Everything in the theme has a purpose though. To see why the parallax setting starts at 150, please watch the background parallax introduction at https://theme.co/apex/forum#background-addendum. It’s best to watch rather than explaining it here so you see the actual parallax action being demoed.

The Parallax effect you wanted is also available if you use the Classic Section (no CSS required). To achieve that in V2 though, you need the background-attachment code but you don’t have to enable parallax. See https://youtu.be/3E9l2DbAOLA. You can put the code in the video in the Element CSS

Hope that gives a little more options.