Banner & time

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

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 :D

OP didn't ask for a pop-up layer so try this: Attachment 132762.

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.

Quote:

---

Originally Posted by 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.

---

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

Quote:

---

Originally Posted by Acorn

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! Attachment 132765

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 Attachment 132767

Quote:

---

Originally Posted by Initiostar

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! Attachment 132765
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 Attachment 132767

---

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.

Attachment 132769

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

@ Acorn

Quote:

---

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.

Quote:

---

Originally Posted by Egg Bramhill

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

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

Quote:

---

<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

Quote:

---

Originally Posted by 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 :D

---

it is perfect for what i needed

thanks a lot..

(sorry I didn't see your answer)

Quote:

---

Originally Posted by Acorn

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


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

Perhaps someone can improve on this?

Acorn

---

great, thank you very much