Page 1 of 1
Universal Parallax
Posted: Tue Jan 30, 2024 9:33 pm
by Bucky108
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?
Re: Universal Parallax
Posted: Wed Jan 31, 2024 7:26 am
by Pablo
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.
Re: Universal Parallax
Posted: Wed Jan 31, 2024 4:46 pm
by Bucky108
Understood, thanks.
Anyone have an idea as to how to do this? Here's an example:
https://juliettecalaf.com/
Re: Universal Parallax
Posted: Wed Jan 31, 2024 4:51 pm
by Pablo
Maybe like this?
- add a layout grid
- set the background of the layout grid to universal parallax
- put the carousel inside the layout grid.
Re: Universal Parallax
Posted: Wed Jan 31, 2024 5:24 pm
by Bucky108
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.
Re: Universal Parallax
Posted: Wed Jan 31, 2024 6:02 pm
by Pablo
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...
Re: Universal Parallax
Posted: Wed Jan 31, 2024 6:22 pm
by Bucky108
You will need to set the background of the Carousel to transparent...
Tried that, still didn't work
Re: Universal Parallax
Posted: Wed Jan 31, 2024 6:23 pm
by Pablo
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.
Re: Universal Parallax
Posted: Wed Jan 31, 2024 6:39 pm
by Bucky108
There's no error but it doesn't have the parallax effect.
I'll send a demo project later.
Re: Universal Parallax
Posted: Wed Jan 31, 2024 6:49 pm
by Pablo
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
Re: Universal Parallax
Posted: Wed Jan 31, 2024 9:48 pm
by Bucky108
Yes I tried to follow the steps. Would you mind posting your test project?
Re: Universal Parallax
Posted: Thu Feb 01, 2024 7:07 am
by Pablo
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.,
Re: Universal Parallax
Posted: Thu Feb 01, 2024 11:55 pm
by Bucky108
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.
Re: Universal Parallax
Posted: Fri Feb 02, 2024 7:20 am
by Pablo
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.
Re: Universal Parallax
Posted: Sat Feb 03, 2024 4:19 am
by Bucky108
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.
Re: Universal Parallax
Posted: Sat Feb 03, 2024 7:49 am
by Pablo
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!
Re: Universal Parallax
Posted: Sat Feb 03, 2024 3:08 pm
by crispy68
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
Re: Universal Parallax
Posted: Sat Feb 03, 2024 3:17 pm
by Bucky108
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.
Re: Universal Parallax
Posted: Sat Feb 03, 2024 3:18 pm
by Bucky108
Crispy that looks good I'll try it.
Re: Universal Parallax
Posted: Sat Feb 03, 2024 3:26 pm
by Bucky108
Crispy yes that looks like it works..thanks!