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
Printable View
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.
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
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
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.Quote:
You have a remnant bit of JS in your Page Code (Body) that was for popping up a layer.
I've enjoyed Your and Gary's solutions.
Another approach that is pure CSS, which replaces all the previous code:
A 5-second display with a half-second fade & roll-up.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>
Perhaps someone can improve on this?
Acorn