Universal Parallax

Bucky108 · Post by **Bucky108** » Tue Jan 30, 2024 9:33 pm

I see how universal parallax works in the "Mini" template, which uses Flex Containers.

Will the universal parallax effect work with a carousel? I'm using full width floating mode and I set $PARALLAX_SPEED$ to 9999 in site properites like in Mini.

If I use parallax instead of universal parallax I get the overlap effect but not with universal parallax. But then the images get cut off in smaller breakpoints.

Does it only work in all breakpoints with a layer or flex container?

Post by **Pablo** » Wed Jan 31, 2024 7:26 am

universal parallax does not work with a carousel.
It works with layers, layout grids and a flex container.

But then the images get cut off in smaller breakpoints.

This is expected behavior, because universal parallax uses 'background-size: cover' to make sure the entire background is covered.

Bucky108 · Post by **Bucky108** » Wed Jan 31, 2024 4:46 pm

Understood, thanks.

Anyone have an idea as to how to do this? Here's an example:

https://juliettecalaf.com/

Post by **Pablo** » Wed Jan 31, 2024 4:51 pm

Maybe like this?
- add a layout grid
- set the background of the layout grid to universal parallax
- put the carousel inside the layout grid.

Bucky108 · Post by **Bucky108** » Wed Jan 31, 2024 5:24 pm

I tried that. The only way the carousel will then display is if it's set to a type of flexible.

When I did that, it did not have the parallax effect.

Post by **Pablo** » Wed Jan 31, 2024 6:02 pm

The only way the carousel will then display is if it's set to a type of flexible.

Correct, because you cannot put a fixed element inside a flexible container. That will break the layout.

When I did that, it did not have the parallax effect.

You will need to set the background of the Carousel to transparent...

Bucky108 · Post by **Bucky108** » Wed Jan 31, 2024 6:22 pm

You will need to set the background of the Carousel to transparent...

Tried that, still didn't work

Post by **Pablo** » Wed Jan 31, 2024 6:23 pm

What exactly does not work? Is there an error?
If you want my help then please share a demo so I can see what you have done.

Bucky108 · Post by **Bucky108** » Wed Jan 31, 2024 6:39 pm

There's no error but it doesn't have the parallax effect.

I'll send a demo project later.

Post by **Pablo** » Wed Jan 31, 2024 6:49 pm

I did a quick test and it works for me, are sure you have done all steps?
- add a layout grid
- set the background of the layout grid to universal parallax
- put the carousel inside the layout grid.
- set the background of the Carousel to transparent

Bucky108 · Post by **Bucky108** » Wed Jan 31, 2024 9:48 pm

Yes I tried to follow the steps. Would you mind posting your test project?

Post by **Pablo** » Thu Feb 01, 2024 7:07 am

I'm sorry, I did not save the project
But basically, I have just opened the mini template, added a layout grid at the top, then inserted a carousel and it worked.,

Bucky108 · Post by **Bucky108** » Thu Feb 01, 2024 11:55 pm

That didn't work for me either, I don't know why.

Anyway, for my current project I really want to have the full width and floating carousel which means parallax won't work with that, so I'm just going to not have that effect on the site.

Thanks for the suggestions.

Post by **Pablo** » Fri Feb 02, 2024 7:20 am

That didn't work for me either,

What exactly does not work? What do you see? Where is the demo?

for my current project I really want to have the full width and floating carousel which means parallax won't work with that, so I'm just going to not have that effect on the site.

If you place the Carousel in a layout grid then it is full width.
The parallax effect will be part of the the layout grid, not the Carousel.

Bucky108 · Post by **Bucky108** » Sat Feb 03, 2024 4:19 am

Understood but I want to use the full width and floating carousel so I can have absolute positioning with text or other objects.

I thought it would just be a nice feature in the website but it's not critical so I'm not going to pursue it any further.

Thanks.

Post by **Pablo** » Sat Feb 03, 2024 7:49 am

Floating and fixed content do not go together. Fixed content will break the floating behavior of the layout.

I want to use the full width and floating carousel so I can have absolute positioning with text or other objects.

If you place a Carousel inside a layout grid then it will still be full width and floating!

crispy68 · Post by **crispy68** » Sat Feb 03, 2024 3:08 pm

If you are trying to re-create what you provided in your demo link, try this:

1. set up your carousel as full width and floating. I'm assuming it is at the top of the page like your demo link.
2. Open up an html box and set it to "between <head></head> tags" and enter the following CSS:

Code: Select all

<style>
#wb_Carousel1{position:sticky;z-index:0;}
</style>

Change the ID of the carousel above to whatever the name of yours is.

See my demo here

Bucky108 · Post by **Bucky108** » Sat Feb 03, 2024 3:17 pm

Yes but I wanted full width and floating to use absolute positioning.

For the purposes of my current project that's more important than having the parallax effect.

Bucky108 · Post by **Bucky108** » Sat Feb 03, 2024 3:18 pm

Crispy that looks good I'll try it.

Bucky108 · Post by **Bucky108** » Sat Feb 03, 2024 3:26 pm

Crispy yes that looks like it works..thanks!

www.wysiwygwebbuilder.com

Universal Parallax

Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax

Re: Universal Parallax