Lay Theme Forum

Hi,
I have a simple one page site and wondered if there's a simple way to make image captions fade in on a scroll – perhaps at a fixed point (%) of the page height? Any pointers would be really helpful. Should I be looking at a jQuery solution?
Many thanks in advance,
Norman

Hi,
I have a simple one page site and wondered if there's a simple way to make image captions fade in on a scroll – perhaps at a fixed point (%) of the page height? Any pointers would be really helpful.
Many thanks in advance,
Norman

@Richard thanks so much! That is so much easier than I thought it would be – I didn't realise there was a built in option for this function.
Thank you!
Norman

Hi @Richard , thanks for your message. I'm actually trying to apply a 'scroll-to-top' function to my primary menu. I thought this might be a good way around it. Is there a straight forward way to apply code to this? Thanks in advance, Norman

Hi Armin, do you have another youtube link for this that you could share. as the link you posted is now private? Thanks, Norman

Hello, is there any way to add code to increase the friction between slides on a full screen slider? I don't want a fade effect but if I take this option off and reduce the 'auto scrolling speed' in the slider options to '0' or '1' it is far too sensitive and fast. I would like to basically add resistance between slides to decrease the speed but without a transition.
– Could this code be adapted for the FS slider?

Thanks,
Norman

window.Frontend.GlobalEvents.on("projectpageshown", function(a) {
            setTimeout(function() {
                jQuery('.lay-carousel').flickity({selectedAttraction: .005, friction: .2 }) ;}, 100)  });

This works perfectly @arminunruh @mariusjopen – thanks so much!!

Dear @mariusjopen,

I also just wondered if there is a simple way to do this. I have a simple carousel with a selection of images and I would like to disable the click. I tried the CSS that was posted in another thread but it didn't work.

This is a link to my site: https://www.organ-studio.com/

Many thanks in advance,
Norman

Hi @mariusjopen,

I am building a basic site with an automatic carousel of images as an intro and an info page that shoots up on a click (not swipe) using a vertical fullscreen slider.

This is the starting point for the site: https://www.organ.services/intro

• Is there also a way to disable the swipe action so the slide is only actioned on a click?

• How can we disable one of the arrow directions on each slide, since we only have 2 slides? We would like to have one direction only on each slide (down/up). Right now it also seems to be effected by the carrousel so click function on intro slide doesn't work properly.

• Is there a way to integrate a scroll within a slide on a vertical slider? We would like to have the text on right side of the info page (2nd slide) on a separate scroll, with the left side remaining fixed.

Many thanks in advance,
Norman

@mariusjopen

Thanks that worked prefectly.

Best,
Norman

Hi,

Is there a simple way to save a back-up of the website? I can't seem to find an existing answer on the forum or through the wordpress options.

Thanks!
Norman

@mariusjopen said in Hover on simple Images:

.img a img{
transition: all 300ms ease;
}

.img:hover a img{
filter: brightness(0.9);
}

.img a .caption{
opacity: 0;
transition: opacity 300ms ease;
}

.img:hover a .caption{
opacity: 1;
}

Thanks Marius – works perfectly!

@arminunruh said in Hover on simple Images:

hey, you can do this with custom css!

.img img{
transition: all 300ms ease;
}

.img:hover img{
filter: brightness(0.9);
}

.img .caption{
opacity: 0;
transition: opacity 300ms ease;
}

.img:hover .caption{
opacity: 1;
}

Css is not so hard to do! There are little video courses about it like the one I recommend on khan university in the documentation section "custom css"

Hi Armin,

Is there a way to modify this CSS so that it only applies to the images on a page that contain links (rather than all images)?

Thanks!
Norman

@mariusjopen said in CSS issues for active state on menu links:

.current-menu-item a {
font-family: Lifeitalics;
}

Hi @mariusjopen

Yes that works perfectly!

Many thanks!
Norman