Streaming live at 10am (PST)

Parallax effect on Image Slider


#1

Hi, I'm trying to make / fix something on the header image slider at the link.

The goal is to make it so that every image on said slider act just like the very first image (the lighthouse). Right now it has a parallax effect. On every other slide, if I try to fix it to the top, the image disappears, and a gray slide appears as the very last slide (like the very last image in the slider), which I find amusing but unwanted.

So, basically, how do I make a proper slider for the header where every image has a parallax effect and hides behind the rest of the site elements when scrolling down?

Thanks!


Here is my public share link: http://https://preview.webflow.com/preview/picnicdepalabras?preview=dbfd8d12f170a9dc2590514291321004


Most site invisible in Firefox / Glitch in Safari / Perfect in Chrome
#2

Ok, a figured out a way to do it but I do not know if it's the best one, so any input is still very welcome!

I made it so that the whole slider is fixed to the top and every section has a relative position.

Before assigning relative position to every section then text and other content in every section would scroll over the slider, instead of the real backgrounds moving along with their content. I also had to add a background color to each element as otherwise the slider image would pop up.

Hope my explanation makes sense.

So, was this the right / best solution possible or is there a better way to do it?

Thanks!


#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.