Banner & time

[rhdpre07]

How can I make it so that when they enter the page there is a banner that closes only after 5 seconds?

Can you with codes and place markers?

I tell myself yes, but I can't think of how...

someone who knows how to do it?

Thank you

[Egg Bramhill]

Hi rhdpre07,

I've managed to get a pop up layer to open on page load using Acorns code.

I've created an animated gif that loads into the pop up layer. It plays for 5 sec then disappears.

Unfortunately I can't get it to refresh on reloading the index page. (Unless I use Ctrl+F5)

Hopefully Acorn can come to the rescue

[Acorn]

OP didn't ask for a pop-up layer so try this: JS - 5sec Banner.xar.

Acorn

[Egg Bramhill]

As always excellent Acorn & by far more superior than my attempt.

However I struggled on with my effort to try to get a clean refresh on each index.htm load.
I finally managed to do it. I scrapped the popup layer and placed the gif on the MouseOff layer.

Big disadvantage with my way is the gif is still on the page all be it a transparent rectangle. The othe downside is you need to edit the animation within Xara to change the timing.

[Acorn]

As always excellent Acorn & by far more superior than my attempt.

However I struggled on with my effort to try to get a clean refresh on each index.htm load.
I finally managed to do it. I scrapped the popup layer and placed the gif on the MouseOff layer.

Big disadvantage with my way is the gif is still on the page all be it a transparent rectangle. The othe downside is you need to edit the animation within Xara to change the timing.

Just a small point. You have a remnant bit of JS in your Page Code (Body) that was for popping up a layer.

On mine to prevent the objects still being on the page and not just transparent change:
bannerList[i].style.opacity = 0;
to
bannerList[i].style.display = 'none';


Anyone want to have a go to make the banner fade out rather than snap.

Acorn

[Initiostar]

Just a small point. You have a remnant bit of JS in your Page Code (Body) that was for popping up a layer.

On mine to prevent the objects still being on the page and not just transparent change:
bannerList[i].style.opacity = 0;
to
bannerList[i].style.display = 'none';


Anyone want to have a go to make the banner fade out rather than snap.

Acorn

I applied a fadeOut animation style to the class 'banner'; it does work (almost), but the banner now returns after it has faded out. Not quite what was intended! JS - 5sec Banner.xar

You can of course add standard Xara animations to the banner as it appears, to create more impact (as shown in the demo file).

Alternatively, here is a jQuery example: https://initiostar.co.uk/demo/fadeIn-fadeOut-banner/ > this has the banner fadeIn and fadeOut, fadeIn being a standard Xara animation, fadeOut using a jQuery statement JQuery - FadeIn-FadeOut-Class Banner.xar

[Acorn]

I applied a fadeOut animation style to the class 'banner'; it does work (almost), but the banner now returns after it has faded out. Not quite what was intended! JS - 5sec Banner.xar
You can of course add standard Xara animations to the banner as it appears, to create more impact (as shown in the demo file).
Alternatively, here is a jQuery example: https://initiostar.co.uk/demo/fadeIn-fadeOut-banner/ > this has the banner fadeIn and fadeOut, fadeIn being a standard Xara animation, fadeOut using a jQuery statement JQuery - FadeIn-FadeOut-Class Banner.xar

Thank you Gary for your jQuery solution.

I decided to stick with a pure JavaScript solution.
Removing a Node List of banner ClassNames using display = 'none'; is tricky as 'display' is an all or nothing property; it does not transition.
I had to use two JS timers: one to do the fade; the second for the removal.

JS - 5sec Banner II.xar

To balance the timing the animation time and the first timeout should equal the second timeout; I put everything as milliseconds.

The more powerful approach would be to use anime.js.
I try to avoid jQuery for small tasks as its overhead is noticeable.

Acorn

[Egg Bramhill]

@ Acorn

You have a remnant bit of JS in your Page Code (Body) that was for popping up a layer.

Yes, I missed that. One further disadvantage of my method is it appends a random number on the src url to ensure it loads afresh from the server each load & not the cache.

I've enjoyed Your and Gary's solutions.

[Acorn]

One further disadvantage of my method is it appends a random number on the src url to ensure it loads afresh from the server each load & not the cache.

Egg, why is that a problem? Without the Math() call, the GIF runs properly from its start every time without having to refetch it.

Acorn

[Acorn]

Another approach that is pure CSS, which replaces all the previous code:

<style>
.banner {
animation: leaving 0.5s 5s ease-out;
animation-fill-mode: forwards;
}


@keyframes leaving {
0% { opacity: 0; max-height: 0; }
0.1% { opacity: 1; }
90% { top: 0; }
100% { opacity: 0; max-height: 0; top: -1000px; }
}
</style>

A 5-second display with a half-second fade & roll-up.

Perhaps someone can improve on this?

Acorn