Load Slideshow on Scroll

Or an alternative would be to have 2 text blocks. One that loads on scrolling to the slider and then fades out to the second text block.

Or actually any method to have a background image with text that changes when scrolled to.

Thanks

Hi Dave,

What you need is called "lazyload". Are you creating a Joomla site? If yes, i do this with the animations of the plugins called "Shortcode Ultimate". You can animate anything with a little shortcode that you can add it with a editor-button in the article view, here is a demo: http://bdthemes.net/demo/joomla/shortcode/en/shortcodes/animation.html

What i do is "embed" the entire slider (i use SmartSlider 3) with in the animation shortcode, that works like a lazyload, then, the slider doesn't active untill the user scroll to this position.

I don't know if is possible in Themler for html sites.

Regards

Last edited 25 July 2017 by gcg

Yes, sorry it's a HTML site. I keep trying various settings but none seem to work.

Themler?

Hi,

Hello, I am placing a slider on the bottom of a page with 2 slides that have text on each. Is there a way to start the slider when the page gets scrolled down that far?

Unfortunately Themler does not support such option. You can only disable autostart. But in this case your visitors will have to switch slides manually.

As alternative you an try using third-party slideshow. HTML part can be added into HTML control, scripts can be linked under the Settings >> Additional HEAD HTML.

Thank you,
Olivia

No, it's an HTML site and I am not looking to make this more complicated by adding 3rd party stuff.

So how can I do it a different way?

A container with a image and then text fades in on Scroll for first part and then fades out and second one fades in and stays?

This could be done right cause the text can be set to scroll? I just can't figure out how to fade the first text part out and the second one in.

Last resort is having both shown at the end. First one comes in then second one a bit later and then they both are there.

Thank you

Hi,

Here is what you asked:

Is there a way to start the slider when the page gets scrolled down that far?

You asked about a something like delay in switching slides or launching slides on scroll. You can set the animation to controls in sides which launches on scroll but it will not affect the behaviour of the Slider control. The animations of elements in Slider and Slider animation (switching slides) are two different processes and two different type of animation.

Thank you,
Olivia

OK, well I need information on an alternative option since this will not work.

So how can I do it a different way?

A container with a image and then text fades in on Scroll for first
part and then fades out and second one fades in and stays?

This could be done right cause the text can be set to scroll? I just
can't figure out how to fade the first text part out and the second
one in.

Last resort is having both shown at the end. First one comes in then
second one a bit later and then they both are there.

Thank you

Hi,

Unfortunately there are a few problems with alternative way too.
The animation extension returns normal control display after it ends. In other words, the element with Fade Out animation will appear again after animation ends. And unfortunately you cannot control the state of the element on animation finish.

If you know css and js you can create own animations which create desired effect.

Thank you,
Olivia

I am not sure I follow you. I have added a few things to my sites that fade in on scroll and then stay there.

Hi,

I have added a few things to my sites that fade in on scroll and then stay there.

Yes. And if you add a control with Fade Out animation is will stay there too after animation finishes.

Thank you,
Olivia

Hello, the client is asking for the text to slide in from the right but inside a container like this site. http://cendanthealth.com/

Is this possible?

I added the text inside a container but it still slides in from all the way from the screen vs just in the container like the above site.

Can you help me fix this?

Thanks

Hi,

Unfortunately Themler animation is not limited by parent container by default. But you can try to set Overflow property to "hidden" under the Container Arrange section. This may help.

Thank you,
Olivia