Streaming live at 10am (PST)

Slider transitions over other brackgrounds


#1

Hi,
I'm having an issue with the slider animation when other sections scroll over the slide.

What happens is that when the slider transition occurs, it seems to stay over the backgrounds defined for other sections, when scrolling over the slider.

If you let the animation start and scroll until other section ("sobre" for instance), the background has a strange behavior when the slides change.

Can you please give me some help about how to solve this? Maybe it's a silly question or an easy one, but I seem to be missing something here...

Thanks in advance!
By the way, love Webflow! By far the best tool for webdesign that I found!

Here is the preview link:
https://webflow.com/design/jesusnoivo?preview=59fac5b18cc355d248efac77195a9d08


#2

Hi, it seems you have your Content BG sections set to auto position and you maybe need to set that to fixed positioning, and z-index higher than zero.

Hope that helps smile


#3

Hi cybredave.

I've tried that but it messes up my all site structure and keeps the "parallax scrolling" effect on the Content BG from rolling...

I've tried to change the slider position, the slides, the Content BG, the sections, played with the z-index and I cannot sort this out...

Thanks for feedback.


#4

I've been testing and the problem only seems to happend with chrome.

Can this be a Bug?

Any ideas?


#5

Hi, I think I am a little confused on what exactly is the problem. You have a slider on the page, set to cover the whole page. Do you want that slider to be shown as the background for each content section, or do you want the background image in the content section to show and not the slider image? Do you even want the slider to be in a fixed position, or have it scroll off the page ? I can see that the slider and the other content on your page is getting messed up yes, but to fix it, I am not sure exactly what you are trying to achieve smile


#6

Hi, I really wanted the slider to be fixed on top and that it fills 100% height of the browser.
I’d like the content to scroll over the slider and that the images defined to be the background of each section (content BG) scroll over the slider (= site content/all sections scrolling over the slider).

What is happening, only in chrome, is that, for a moment, the slider transitions blink over the content BG backgrounds and that was not supposed to happen...

To see this, please let the slider start the transition effect and then scroll to a section with a Content BG image. Leave it in that position for a moment. When the slider transition occurs, you’ll see the blinking over the Content BG image.

Sorry If I couldn’t explain it better before. Hope it is a bit clear now.
Thanks again.


#7

Hi, I see now, thanks for clarifying the issue, now I understand smile

Have you tried to set the background image that is in each of your Content BG sections to be scrolling position and not FIXED as you have now? When I change this setting, then the site seems to flow naturally and scroll with content bg images scrolling over slider:

In the above example, I have changed the BG position from Fixed to scrolling... try that, see if it achieves the effect you are looking for... If not, I will have another look.


#8

Hi cyberdave,

I tried that and seem to solve the slider blinking, but then I lose the effect I was trying to achieve.

I'm trying to do as this example kindly provided by the user "sasqik", with the content BG sections: http://paralaxdemo.webflow.com/

(please check out this topic: http://forum.webflow.com/t/pageinteractive-pl-brand-new-webiste/3025/10)

I wanted this effect on the content BG and then rolling over the slider...
I know it’s tricky, even more for a newbie like me...

Thank you so much for your patience.


#9