STH Parallaxer Stack on F6

[scottf]

Hi all,

Does anyone know if JW Parallax Stack @joeworkman works on mobile devices?

There is a drop zone for mobile images but the parallax effect doesn’t seem to work on mobile devices.

Also, while on parallax question.

I also have Parallaxer Stack by Shaking The Habitual @habitualshaker but it isn’t playing very nicely with F6.

I want to place an overlay over the image that has the parallax effect on.

I have setup an overlay swatch in F6 but when placing the class details into the container that has the STH Parallaxer Stack the overlay doesn’t work.

STH Parallaxer Stack, is a great stack and works on mobile plus it has lots of options but just having a couple of slight issues when using on F6.

Does STH Parallaxer Stack have an overlay option? Can’t see one.

Test site here - https://corianna.art

Home page has JW Parallax Stack
Page 2 has STH Parallaxer Stack
Page 3 has JW Parallax Stack

Thanks for any advise.

Cheers Scott

[pmjd]

As far as I know Joe’s Parallax stack doesn’t work on mobile.

[habitualshaker]

Hi @scottf

You should just add the overlay class to the Custom CSS box in Parallaxer stack. After that I think it is just a z-index issue.

Can you add a z-index to your overlay swatch? If so set it to 1 and add this css too so that the added content in parallaxer sits above the overlay:

.parallaxer-container .top-full {
z-index: 2
}

I think that should work.

Also i’d recommend that you use vh instead of % for your max-height units (i.e. 50vh)

Hope that helps?

Edit: Alternatively, seeing as the overlay is behind the image you could set the image to have an opacity level. e.g.:

.paraimg{
opacity: 0.7
}

First approach is probably better.

[Webdeersign]

Looks like Stuart answered you as I was typing.

[scottf]

Hi Stuart,
Thanks for the suggestions.
I tried that css but no luck, overlay still not happening.
Swatches don’t seem to have z index option, so can’t do it that way.
Have sent a help request to Joe Workman to see if he has some thoughts.
Have a great weekend.
I will continue to see if I can solve the issue over the weekend.
Thanks Scott

[Teefers]

Did you try the CSS on the test page 2 above?

It looks like you added it to the custom class area and not the CSS area:

My understanding of swatches is that you name them with a class name?
It the swatch doesn’t support z-index then you can add it to the custom CSS.
so it the swatch is named myOverlay then try adding this:

.myOverlay {
   z-index: 1;
}

But again that needs to be added to the page level CSS area.

[Webdeersign]

@scottf Looks like you may have entered dots before the class names in the stack classes box. So where you should have entered just:

parallaxer-container
top-full

you entered:

.parallaxer-container
.top-full

You should remove those dots if you used them in the classes box.

[scottf]

Hi Teefers,

Thanks so much for that quick response.

I wasn’t putting css into page level css area but have just done that now…see screenshot.
But still no overlay…I’ve made it a purple overlay2 so should easier to see effect, but no purple overlay.

I have put the overlay2 class into the container stack…see screenshot.

That is all one page2 only.

Not sure where I’m going wrong??? I have re-uploaded the site after marking all resources as changed.

[Teefers]

If I understand what you’re asking for, you want the overlay on top of the parallaxer?

If so try reversing the z-index. Make overlay2 a z-index of 2 and parallaxer set to 1.

[scottf]

Hi Teefers,
Yes, that’s correct overlay on top of the parallaxer but text on top of overlay.

Basically the white text over the image needs to stand out more where image is white, the current image is not too bad but other pages may have lighter images and I want the text the stand out better over light images.

Have changed the index as suggested overlay2 z-index of 2 and parallaxer z-index of 1 and uploaded but nope…still not getting overlay to happen.

Maybe has something to do with the parallaxer having “add content” for the text content?? @habitualshaker

Just not sure…??

Thanks Scott

[habitualshaker]

I’m just on my phone so can’t check but I think you need to apply the overlay z-index value to the before pseudo class.

So…

.overlay2:before{
z-index: 1
}

[Teefers]

I think Stuart(@habitualshaker) is correct, you need the sudo
:before, but the z-index needs to be 2.

[scottf]

Hi Stuart,

Yep…that was it!! Brilliant, thank you.

CSS in page area is now-
.overlay1:before {
z-index: 1;
}
.parallaxer-container .top-full {
z-index: 2;
}