Page 1 of 1
Sticky Layer Opacity and Breakpoints
Posted: Fri Jul 30, 2021 8:35 pm
by protectourlands
Does Sticky Layer support different opacity settings in different breakpoints? It seems to on the workpage, but when I preview/publish it does not.
Re: Sticky Layer Opacity and Breakpoints
Posted: Fri Jul 30, 2021 11:52 pm
by crispy68
It seems to work for me.
Re: Sticky Layer Opacity and Breakpoints
Posted: Sat Jul 31, 2021 12:08 am
by protectourlands
Interesting. I cannot seem to get it to work for me. I want to set the default and large breakpoints to 0, then set the smaller device breakpoints to 100 so the layer only shows on smaller devices. I just cannot get it to work when the default is 0. Can you try this?
Re: Sticky Layer Opacity and Breakpoints
Posted: Sat Jul 31, 2021 12:32 am
by protectourlands
If I can get that to work, I then need to set a scroll animation for 0 opacity until the page is scrolled, then 100%. Then I need to set the page to disable scroll transitions so this doesn't affect the smaller layouts. the reason I am doing this is because I do not want the layer to briefly "flash" on page load.
Re: Sticky Layer Opacity and Breakpoints
Posted: Sat Jul 31, 2021 1:11 am
by crispy68
Still works for me.
Steps:
1. Insert layer, set mode to Sticky Layer, set the background color to whatever color and set the alpha value to zero
2. Insert breakpoint
3. Open up layer again in breakpoint, set background color alpha value to 150 (or whatever)
4. preview
Re: Sticky Layer Opacity and Breakpoints
Posted: Sat Jul 31, 2021 1:27 am
by protectourlands
Thank you Crispy but I cannot do that. I should have been more specific. I apologize. The layer is a container of objects. I need to adjust the opacity of the layer itself, and consequently all of its children.
Layer > General > Opacity > 0
Then use Transition animations to control the layer opacity on scroll. Then set the page to disable scroll transitions on the small layouts so they always show regardless of scroll.
Re: Sticky Layer Opacity and Breakpoints
Posted: Sat Jul 31, 2021 1:38 am
by crispy68
Based on your description, the opacity under the General tab is not 'responsive' in breakpoints.
However, you could simply add some CSS to head section of the page like such:
Code: Select all
<style>
@media only screen and (max-width:969px){#Layer1{opacity:1;}}
</style>
Change the ID and max-width value to what you need. Of course this only fixes your opacity breakpoint issue and doesnt address the transition you want.
So you want the layer invisible until a certain breaktpoint and then the opacity changes on scroll?
Re: Sticky Layer Opacity and Breakpoints
Posted: Sat Jul 31, 2021 2:37 am
by protectourlands
Actually I have now discovered that the opacity is responsive, but only if the default width is set to 100. Then any break point can be set as desired. If I can set the default width opacity to 0, then set the small breakpoints opacity to 100, everything will work.
Re: Sticky Layer Opacity and Breakpoints
Posted: Sat Jul 31, 2021 8:07 pm
by protectourlands
Thank you Crispy. Your @media solution in the head code worked. It is exactly what I needed.