Load Slideshow on Scroll

DaveOzric
943 Posts
DaveOzric posted this 24 July 2017

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? Similar to an animation in the extensions > animations options.

I don't want them to see the last slide first so if it's looping they may not see them in order when they scroll down to it.

Thank you

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? Similar to an animation in the extensions > animations options. I don't want them to see the last slide first so if it's looping they may not see them in order when they scroll down to it. Thank you
Vote to pay developers attention to this features or issue.
12 Comments
Order By: Standard | Newest
DaveOzric
943 Posts
DaveOzric posted this 24 July 2017

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

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
gcg
62 Posts
gcg posted this 25 July 2017

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

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

DaveOzric
943 Posts
DaveOzric posted this 25 July 2017

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

Themler?

Yes, sorry it's a HTML site. I keep trying various settings but none seem to work. Themler?
Support Team
Support Team posted this 25 July 2017

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

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
DaveOzric
943 Posts
DaveOzric posted this 25 July 2017

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

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
Support Team
Support Team posted this 25 July 2017

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

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
DaveOzric
943 Posts
DaveOzric posted this 25 July 2017

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

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
Support Team
Support Team posted this 26 July 2017

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

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
DaveOzric
943 Posts
DaveOzric posted this 26 July 2017

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.

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.
Support Team
Support Team posted this 28 July 2017

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

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
DaveOzric
943 Posts
DaveOzric posted this 28 July 2017

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

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
Support Team
Support Team posted this 30 July 2017

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

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
You must log in or register to leave comments