Chasing down a slider problem

[bwood]

I’m a fan of the new slider component, but I’m chasing down a visual problem which happens when the viewer opens the first page.
I’ve constructed my slider. I’ve changed the color of the overlay behind the text on the opening slide. The overlay was changed orange, then I added transparency. The text color is white. There are three slides in the series.

Upon loading the site in chrome and safari, the overlay blinks solid orange for a second, then as the slider continues to load everything settles down, and the slider works just fine.

Admittedly the slider works fine when loaded, but this blink of a solid orange overlay is jarring. I’ve used sliders successfully on a couple of sites, but this one is not as smooth.

I hope I’ve described the problem correctly. Try it www.northeastspca.org and see. It’s a strange one.

-Bill

[Acorn]

Bill, if you could slo-mo the page, you will see that the box and text are being scaled to fit the required space.

I think if you add a short Reveal delay, this would be hidden.
Failing that set the Autofit to container Off and set the Font Size manually. That might work.
You could try changing the hidden default slide to have a transparent background as well.

Bundle the Sider and images into a separate XAR file so we can have a dig around.

Acorn

[bwood]

Thanks Acorn, for a couple of ideas. As mentioned I’ve got some nice comments on my museum site on sliders, but this one has me a bit stumped. I could also try simply not touching the color of the overlay and let sleeping dogs lie. I did change the fonts from Aerial to Noto Sans and fiddled with that a bit.

[Egg Bramhill]

Following on from Acorns idea I created a tiny animated svg to overlay the slider. The svg is only 52Kb's and I think it loads faster than the slider it overlays. Here's an example Bill, I'll happily attach the svg if you wish:
LINK

[Chris M]

That looks really slick, Egg.

[Egg Bramhill]

Thanks Chris. I'm just working on the funding thermometer just for fun now.

[Acorn]

I think the trick is to customise the default, hidden, slide and then add in your required slides. Each will adopt the transparency and font. Otherwise you are having to manually alter each new slide.

There is a Xara failing in that the first text block does not perform the expected web animation.
I suspect another counting from zero error.

Xara has still not address hiding the backgrounds of all non-current sides.
Not doing so fails when a trnasparent PNG is set as the background.

Acorn

[Egg Bramhill]

And another approach re the Fundraising thermometer. Attached xar file for inclusion within an iframe. The advantage of doing it this way is that you only need to edit & publish a one page website instead of republishing the complete website. Visible on the left of the link above, the right hand side is an svg. All vector.

[bwood]

Following on from Acorns idea I created a tiny animated svg to overlay the slider. The svg is only 52Kb's and I think it loads faster than the slider it overlays. Here's an example Bill, I'll happily attach the svg if you wish:
LINK

Could you please Egg. Many thanks!

[bwood]

I think the trick is to customise the default, hidden, slide and then add in your required slides. Each will adopt the transparency and font. Otherwise you are having to manually alter each new slide.

There is a Xara failing in that the first text block does not perform the expected web animation.
I suspect another counting from zero error.

Xara has still not address hiding the backgrounds of all non-current sides.
Not doing so fails when a trnasparent PNG is set as the background.

Acorn

And that is the point of the matter. I AM having to customize each slide. Each is totally independent. Again I must do the Xara way. Strangely enough I’ve use the same process with no problems www.melfortmuseum.org with no problems, other than one can see the shuffling of slides for an instant.