Mason Grid Parallax Effect

[Rule72]

Hello, ThemeCo!

This is a two-part question. The first part is as follows:

While it’s generally an amazing environment for creating great designs, Cornerstone occasionally makes me feel like I might be developing Alzheimer’s. This is definitely the case when I want to play with parallax effects. Sometimes, the “Section” background controls look exactly like this image I’ve pulled from your own how-to article:

However, at other times even after editing the parallax sections the controls will seemingly dumb themselves down, as such:

Note how the advanced background controls and access to different parallax layers have made like “display:none” and disappeared. I’m curious what’s going on under the hood that causes this, and how to undo the phenomenon if I need to.

---

Moving past that to the second part of this support topic, I’m attempting to get an almost mason grid style similar to what you should see here: https://www.gramercytavern.com/ … While the uneven top of the second section’s columns is interesting enough, what I particularly like is what happens when the two parallax’d backgrounds meet in the middle as the page is scrolled.

The question here is, does Cornerstone support column parallax, or is it only really enabled on a row or section level?

Thank you for your time,
-Jake

[ruenel]

Hello Jake,

Thanks for writing in!

1.) The advance controls may have been turn off. Please go to X > Settings > Permissions > User Preferences > Advanced Mode and set it to “Always On”.

2.) Regretfully the parallax effect will be applied to the section background image only. Alternatively, you can have a parallax like effect when adding a background image in one of your columns. Simply edit the column and in the column settings, find the “Customize” tab. You will be needing to insert this inline element css:

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

Hope this helps. Please let us know how it goes.

[Rule72]

The advanced mode preferences worked perfectly and will save many headaches, and the static background “faux parallax” effect happened to be what I was looking for anyways. Pulling the columns out as “display:block” in order to achieve the sort of disconnected mason grid effect was a chore to create in a responsive manner, but thanks to this feedback that was the only problem.

Thanks for the help!

[christian]

You’re welcome. Glad we’re able help.