How do I get this scrolling effect?

Beaver Builder
1

Hi Folks,

Today I’ve checked a website called https://wpdevelopmentworkflow.com/. Maybe it’s interessting for someone but that is not the point for the moment.

They use the “altitude-pro” theme from the Genesis Framework. What I really like is the scrolling effect they have on the bigger images. The color gets darker if you scroll down.

Do you have any idea how I can use this effect on my site, built with beaver builder theme and the beaver builder pro plugin?

It would be great to get some tips!

Thanks in advance
Bastian

2

Hey Bastian,

Thanks for posting! I’m not really sure if that feature is part of the theme, it’s quite possible it’s custom coded. Anyway, try the CSS snippet below. It’s kind of an easier way to achieve it.

Basically, how it’s done is simply placing another layer with a background on top of the layer with the background image, pretty much how our background color overlays work. Just that in this case, the color overlay he’s using is in the form of a gradient. If you want to play around with the background gradient, you can search for background gradient generators online and change the background code below.

.fl-row-bg-photo {
  position: relative;
}
.fl-row-bg-photo:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  content: '';
  z-index: 1;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
}

Let us know how it goes! :slight_smile:

Edit: Sorry, I forgot to mention this only works on rows with background images, not parallax. You can set it to fixed so you get the exact same thing as that site. :slight_smile:

Ben

3

Hi Ben,

thanks for your very fast and great answer!

Ok! So I copy the code above in my custom css file. But how do I connect the specific area with the background image to this lines of code in my custom CSS File?

Thanks in advance
Bastian

4

Hey Bastian,

The CSS above simply applies the effect to all rows with background images. If you only want to apply it to specific rows only, you could place a class on that row, then change the selectors above like so… .fl-row-bg-photo.gradient-overlay:before and .fl-row-bg-photo.gradient-overlay considering gradient-overlay was the class you placed. :slight_smile:

Ben

5

Hi Ben,

ok, got it. There is just one thing.
Right now, the new layer is on top of all instances. So my headline is turning black too. It would be great to see the gradience effect only on the background image and not on the headlines and text I placed in columns right on this row.

Thanks in advance
Bastian

6

Hey Bastian,

That’s a bit weird as it wasn’t happening on my end. I’ve changed it so it works exactly the same as our background overlay feature. Could you give it a shot and see if it works?

.fl-row-bg-photo {
  position: relative;
}
.fl-row-bg-photo .fl-row-content-wrap:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  content: '';
  z-index: 0;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
}

Same thing as above, if you added a class to rows you want this to apply to, simply append the class after .fl-row-bg-photo like so… .fl-row-bg-photo.new-class .fl-row-content-wrap:after.

Ben