Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Banner & time

  1. #1
    Join Date
    Feb 2022
    Posts
    17

    Default 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

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,429

    Default Re: Banner & time

    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
    Attached Files Attached Files
    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

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,908

    Default Re: Banner & time

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

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,429

    Default Re: Banner & time

    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.
    Attached Files Attached Files
    Last edited by Egg Bramhill; 18 September 2022 at 12:10 AM.
    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

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,908

    Default Re: Banner & time

    Quote Originally Posted by Egg Bramhill View Post
    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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  6. #6
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    867

    Default Re: Banner & time

    Quote Originally Posted by Acorn View Post
    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
    Gary
    www.initiostar.co.uk


    Xara Pro X 19.0.0.64291 May 3 2022

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,908

    Default Re: Banner & time

    Quote Originally Posted by Initiostar View Post
    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 and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,429

    Default Re: Banner & time

    @ 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.
    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

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,908

    Default Re: Banner & time

    Quote Originally Posted by Egg Bramhill View Post
    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 - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,908

    Default Re: Banner & time

    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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •