Welcome to TalkGraphics.com
Results 1 to 4 of 4

Thread: Index Page

  1. #1
    Join Date
    Sep 2015
    Location
    Middle Wisconsin... just 80 miles from the Frozen Tundra of Lambeau Field
    Posts
    36

    Default Index Page

    I have a temporary need to have an Index page temporarily load for a few seconds with a humorous advertisement for the company then either slide off, fade into the proper index page or something similar.

    Thought I had it worked out using the Web Page PropertiesPage TransitionPage. Really didn't work. I thought there was a way to do this... perhaps it's coding? Found Page Transition in the manual. Thought I followed the steps. Obviously a "t" wasn't crossed or the "i" wasn't dotted... or this is not what I thought it was for.

    Any thoughts? Thanks

    Oh yes, Designer Pro X 18 desktop version.

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Index Page

    Quote Originally Posted by R Duane View Post
    I have a temporary need to have an Index page temporarily load for a few seconds with a humorous advertisement for the company then either slide off, fade into the proper index page or something similar.

    Thought I had it worked out using the Web Page PropertiesPage TransitionPage. Really didn't work. I thought there was a way to do this... perhaps it's coding? Found Page Transition in the manual. Thought I followed the steps. Obviously a "t" wasn't crossed or the "i" wasn't dotted... or this is not what I thought it was for.

    Any thoughts? Thanks

    Oh yes, Designer Pro X 18 desktop version.
    Currently busy but this approach, using a Pop-up layer, should still be OK: https://www.talkgraphics.com/showthr...619#post499619.

    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

  3. #3
    Join Date
    Sep 2015
    Location
    Middle Wisconsin... just 80 miles from the Frozen Tundra of Lambeau Field
    Posts
    36

    Default Re: Index Page

    Thanks for your quick reply... will give it a try.

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Index Page

    Here is a pure CSS solution that has a bit of everything: CSS-Flash Advert.xar

    Give all objects in the ad then ClassName of htmlclass="advertisement", using Utilities > Names.
    In the index Page Head, insert this CSS:
    Code:
    <style>
    .advertisement {
      opacity: 0;
      animation: present 5s ease-in-out;
    }
    
    @keyframes present {
      0% { opacity: 0; }
      15%, 75% { opacity: 1; transform: translateX(0%); }
      100% { opacity: 0; transform: translateX(100%) scale(0.25) rotate(360deg); }
    }
    </style>
    Remove all transform statements to just have a fade in and out effect.
    The overall timing is the 5s (5 seconds).
    The effects are timed to this through the percentage values.
    At 15%, the ad will have faded in fully in 0.75s (15% x 5s), remains for 3s ((75-15)% x 5s), and goes nuts to the end of the 5s.
    So in the last 1.25s, the shapes fade out, move right off the page, shrink to quarter size and have a full clockwise circle rotate.

    Any page refresh or variant change restarts it all over.

    Acorn
    Last edited by Acorn; 29 March 2024 at 10:19 AM.
    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

 

 

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
  •