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
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
Egg
Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
OP didn't ask for a pop-up layer so try this: JS - 5sec Banner.xar.
Acorn
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
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.
Last edited by Egg Bramhill; 17 September 2022 at 11:10 PM.
Egg
Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
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
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
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
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
@ 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.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.
Egg
Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
Another approach that is pure CSS, which replaces all the previous code:
A 5-second display with a half-second fade & roll-up.<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
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
Bookmarks