Can WWB do this?

[alan_sh]

If yoo go to this site https://www.theverge.com and scroll down, you will see blocks with links in scroll into view, stay there for a while as you continue scrolling and then scroll off.

How would you do that in WWB?

Alan

[wwonderfull]

Something like this? Does not need custom script by the way although can be done using custom scripts too.

https://s13.gifyu.com/images/SCDAc.gif

[alan_sh]

No - it needs the right side to scroll differently to the left side.

[BaconFries]

Have you looked at the following
https://www.wysiwygwebbuilder.com/scrol ... tions.html
https://www.wysiwygwebbuilder.com/motion_effects.html

[crispy68]

I believe you could accomplish this using sticky layers.

[wwonderfull]

No - it needs the right side to scroll differently to the left side.

It can be done in that way too. The thing which you asked I already did it on my website's blog menu. It uses a bit of custom script but I think it is possible even with css. Check this HERE (link has been removed by author)

[alan_sh]

I believe you could accomplish this using sticky layers.

Give me a clue? I thought a layer had to be full width

Alan

[crispy68]

@Alan,

Here is a demo I created using just layout grids. The inner grid is set to sticky.
https://webbuildertemplates.com/demo/sticky/

[alan_sh]

Very nice. Any chance of the WBS file(s)?

Alan

[crispy68]

Hey Alan,

I'm not at home but honestly you wont need it. It is very easy. Here is what I did.

1. Insert a grid (1x 5x 5x 1x). Set Grid System to either Flexbox or CSS grid.
2. In column 2, insert a text object. Add a lot of text so that it's long and will scroll.
3. In column 3, insert a grid and set it to sticky. Grid System can be any choice. All I did was set the background of the grid to blue and rounded the edges. Insert a text object into this grid.

That's it!

[VictorKrs]

Hey Alan,

I'm not at home but honestly you wont need it. It is very easy. Here is what I did.

1. Insert a grid (1x 5x 5x 1x).
2. In column 2, insert a text object. Add a lot of text so that it's long and will scroll.
3. In column 3, insert a grid and set it to sticky. All I did was set the background of the grid to blue and rounded the edges. Insert a text object into this grid.

That's it!

Hello, Crispy 68!

I couldn't do it.
The nested layout grid is stuck to the top and does not move when scrolling.
If it is not difficult, as soon as such an opportunity appears, please post a link to the project file! I'll see where I'm doing it wrong.

Sincerely, Victor

[wwonderfull]

Hey Alan,

I'm not at home but honestly you wont need it. It is very easy. Here is what I did.

1. Insert a grid (1x 5x 5x 1x).
2. In column 2, insert a text object. Add a lot of text so that it's long and will scroll.
3. In column 3, insert a grid and set it to sticky. All I did was set the background of the grid to blue and rounded the edges. Insert a text object into this grid.

That's it!

Hello, Crispy 68!

I couldn't do it.
The nested layout grid is stuck to the top and does not move when scrolling.
If it is not difficult, as soon as such an opportunity appears, please post a link to the project file! I'll see where I'm doing it wrong.

Sincerely, Victor

You need to set the grids to flex from default.

[VictorKrs]

Hey Alan,

I'm not at home but honestly you wont need it. It is very easy. Here is what I did.

1. Insert a grid (1x 5x 5x 1x).
2. In column 2, insert a text object. Add a lot of text so that it's long and will scroll.
3. In column 3, insert a grid and set it to sticky. All I did was set the background of the grid to blue and rounded the edges. Insert a text object into this grid.

That's it!

Hello, Crispy 68!

I couldn't do it.
The nested layout grid is stuck to the top and does not move when scrolling.
If it is not difficult, as soon as such an opportunity appears, please post a link to the project file! I'll see where I'm doing it wrong.

Sincerely, Victor

You need to set the grids to flex from default.

Thanks for the hint, Wwonderfull! Everything is working! Super! And of course, many thanks to Crispy 68!

[crispy68]

Sorry, I always set grids to use flexbox (rarely, if ever, use default) and failed to leave that part out. I have updated my previous post.

The main grid has to be set to flexbox or css grid (not default). The grid inside can be set to any of them.

[alan_sh]

Thanks - I may try that tomorrow.

Alan

[VictorKrs]

Hey Alan,

I'm not at home but honestly you wont need it. It is very easy. Here is what I did.

1. Insert a grid (1x 5x 5x 1x). Set Grid System to either Flexbox or CSS grid.
2. In column 2, insert a text object. Add a lot of text so that it's long and will scroll.
3. In column 3, insert a grid and set it to sticky. Grid System can be any choice. All I did was set the background of the grid to blue and rounded the edges. Insert a text object into this grid.

That's it!

Hello, Crispy 68! Please tell me, why should your recommendation make Layout grid according to the scheme 1x 5x 5x 1x? I've seen that other WWB users add this 1x, but I can't figure out why. What does it give?
Is it possible to add Margin on the left and right to the Layout Grid?

Sincerely, Victor

[bkjohns]

Sorry, I always set grids to use flexbox (rarely, if ever, use default) and failed to leave that part out. I have updated my previous post.

Perhaps that should be a global option in WWB, to automatically open a new LG with your preferred type. A user selected default.

[crispy68]

@Victorkrs

When I mentioned creating a grid that was 1x 5x 5x 1x, it was to communicate to users how I created the demo I provided so that you could recreate it yourself. It was not a recommendation.

I typically will add 1x to each side to create spacing on each side of the website so that it doesn't fill the screen end to end. Aesthetically, I like the look better. Since there are 12 grid columns, the width of each column is about 8.33% of the total screen size. On a 1920px wide screen, that gap is about 160px on each side. At 1366px wide, it is 114px wide and so on. This stays proportionate with the other columns as the screen size decreases.

Using margin as alternate method works too but I think in WB it only allows a fixed px width where the column method is percentages. You could add your own CSS to use percentages instead but that requires adding additional code.

[VictorKrs]

@Victorkrs

When I mentioned creating a grid that was 1x 5x 5x 1x, it was to communicate to users how I created the demo I provided so that you could recreate it yourself. It was not a recommendation.

I typically will add 1x to each side to create spacing on each side of the website so that it doesn't fill the screen end to end. Aesthetically, I like the look better. Since there are 12 grid columns, the width of each column is about 8.33% of the total screen size. On a 1920px wide screen, that gap is about 160px on each side. At 1366px wide, it is 114px wide and so on. This stays proportionate with the other columns as the screen size decreases.

Using margin as alternate method works too but I think in WB it only allows a fixed px width where the column method is percentages. You could add your own CSS to use percentages instead but that requires adding additional code.

Good evening, Crispy!

Yes, of course! The additional column in the Layout Grid has relative dimensions at the edges, unlike margin. This is the key argument for using just such a solution for different devices.
And why didn't I figure it out myself? Thank you for the answer!

Sincerely, Victor!