Gray bar above slider

Design help General
1

Hi!
I’m trying to create a slider for header section with a parallax background moving up on scroll, using this tutorial (option #2): Different Parallax effects possible with Webflow (no custom code required)

I’m having a problem where there is a gray bar area above the image (inside the slide) that I can’t get rid of.
Please help!

Here is my site Read-Only: https://preview.webflow.com/preview/carbon-path-new?utm_medium=preview_link&utm_source=dashboard&utm_content=carbon-path-new&preview=50147d62179d31a55fffeeaddac8ad0a&mode=preview

2

Make the ‘Parallax H Image’ element height larger and add a negative margin-top/top.

3

I tried that, when you scroll down the bar just appears again… maybe it’s a bug?

4

There are few reasons why you are getting that “gray bar”.

To fix that I can recommend set the actual Slide height same as a parallax-h-image (140%)

32%20AM
32%20AM238×533 18.5 KB

and move that block 5% Up.
19%20AM

2 Likes
5

Thank you! I love you!

1 Like
6

Hi Sabanna!
So there is another issue with the slider, every next slide has the image disappearing more to the left, on the 2nd slide the image is only 10% visible and on the 3rd it’s completely gone :confused:
Is this a bug?

7

It is not a bug, it is how CSS works.

When you set background image position to fixed it will be adjusting/aligning itself to the body “coordinates”

The Slider functionality build the way that all slides stays sort of in one line and only only slide is visible at the moment by moving/shifting that “line” left and right".

So, when you apply bg-images with settings “fixed” it ignores all slide positions and stick to the body edge. Then when line of slides shifts left all images shifts too :frowning: and you can’t see them anymore.

You can try to adjust width of every next image, but I think it will be much easier to achieve the effect you want by using interactions

8

I have no idea how I would apply that parallax effect with interactions. This seems too advanced, but if you help me figure it out then I will be happy to create a post in tips and tricks for anyone else that would like to use it.

9

It is very easy, actually :slight_smile:

  1. Remove all the transform settings from the parallax-h-image blocks and from slides

  2. set bg-images to not-fixed and cover

  3. Temporally remove combo-class from the 1st parallax-h-image block so you could use that class in the Interaction

  4. Create Page-trigger animation with While page is scrolling trigger

    06%20PM
    06%20PM244×540 14.8 KB

  5. Add Move action for the parallax-h-image block

    43%20PM
    43%20PM244×1105 188 KB

  6. Select Affect: class
    46%20PM

  7. Adjust how much do you want image to move while page is scrolling
    Screen Recording 2019-07-24... (sorry big gif here)

  8. Bring back combo-classes if you need

Now the interaction will affect all elements with the parallax-h-image, no matter what combo-classes they have

Hope it helps,
Anna

2 Likes
10

Thank you so much! You’re the best!