Welcome to TalkGraphics.com
Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 22
  1. #11
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,276

    Default Re: Leveraging the Conventional Website

    Way too late in the night for me to try and translate what you said. I'll stare at it in earnest in between jobs tomorrow.

  2. #12
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,325

    Default Re: Leveraging the Conventional Website

    Quote Originally Posted by Chris M View Post
    Way too late in the night for me to try and translate what you said. I'll stare at it in earnest in between jobs tomorrow.
    Chris, I am also admitting a cop-out.
    The original intent was to make the numbered jumps go to the page number.
    I extracted next and prev from a deeper location where I had accounted for the zero-based JS arithmetic. When I brought them out to main(), I failed to check these jumps again.
    So, at the moment, they will be one out. You will have to reduce their current values by one.
    Doing it this way does keep the code cleaner and smaller.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  3. #13
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,891

    Default Re: Leveraging the Conventional Website

    Acorn, I've removed the individual page CCS effects and replaced them with a single website effect in the Website HTML code Head to have the same in & out transitions on all pages, the same as in a calendar flip routine.

    However the page out transition (which is the one I want) is not the mirror image of the page in transition, which seems to come in from the left, rather than centered. Any idea why?

    <script>
    async function main() {
    page = location.href.split('/').pop();
    xrfls = document.querySelectorAll('[name*="XAR Files"]')[0].content;
    afile = await fetch(xrfls);
    asite = await afile.text();
    pages = asite.split('\r\n').filter(x => x.search(/\.htm/) > 0 );
    i = pages.indexOf(page);
    a = pages.length;
    next = (i + 1)%a;
    prev = (i + a - 1)%a;
    }
    main();
    </script>

    <style>
    .pagein {
    animation: pageConcaveVBI;
    animation-timing-function: ease-in;
    animation-duration: 450ms;
    animation-fill-mode: forwards;
    }
    </style>

    <style>
    .pageout {
    animation: pageConcaveVBO;
    animation-timing-function: ease-out;
    animation-duration: 450ms;
    animation-fill-mode: forwards;
    }
    </style>
    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

  4. #14
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,276

    Default Re: Leveraging the Conventional Website

    Adding the revised code (Website (Head)) and changing the link array to start from 0 did the trick. On a side not: I did try starting from 0 before, but it failed, both the new code and the 0 are required.

    However, back to the variant. Adding a variant also kills the animation effect.

    >>> Dots.xar <<< No variant

    >>> Dots Variant.xar <<< With variant

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

    Thumbs down Re: Leveraging the Conventional Website

    Quote Originally Posted by Egg Bramhill View Post
    Acorn, I've removed the individual page CCS effects and replaced them with a single website effect in the Website HTML code Head to have the same in & out transitions on all pages, the same as in a calendar flip routine.
    However the page out transition (which is the one I want) is not the mirror image of the page in transition, which seems to come in from the left, rather than centered. Any idea why?
    Egg, I don't get any left actions until the STFW is under 90%.
    A suggestion might be to add a small delay to the CSS to ensure Xara's code for fitting the page to the browser is closer to complete. This sadly gives a jump.
    What I also tried was upping both times to 800ms and changing the fadeout animation-fill-mode to none.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  6. #16
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,325

    Default Re: Leveraging the Conventional Website

    @Egg, it seems that when Xara build its Effects, a number were then not subsequently checked when it introduced STFW.
    As a consequence, we get the left-side roll-in.

    I have created a pair of Effects just for you:
    Code:
    <style>.pagein {
    animation: pageEggFlipI;
    animation-timing-function: ease-in;
    animation-duration: 450ms;
    animation-fill-mode: forwards;
    }
    .pageout {
    animation: pageEggFlipO;
    animation-timing-function: ease-out;
    animation-duration: 450ms;
    animation-fill-mode: forwards;
    }
    @keyframes pageEggFlipI {
      0% { transform:perspective(1000px) translate3d(0,50%,0) rotate3d(1,0,0,120deg) translate3d(0,50%,0); opacity:0; }                            
      100% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; }
    }
    @keyframes pageEggFlipO {
      0% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; }
      100% { transform:perspective(1000px) translate3d(0,-50%,0) rotate3d(1,0,0,-120deg) translate3d(0,-50%,0); opacity:0; }
    }
    </style>
    They work for me but I'm sure you will be quite attentive.

    Acorn


    ASIDE#2:
    I have found that by rolling your own Effect (with @keyframes), you can bypass the need for any object to be Sticky as a prerequisite.
    This can remove prs4.js and ultimately jQuery from the mix making loading much the faster but only where you are not using Xara Effects elsewhere.
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  7. #17
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,891

    Default Re: Leveraging the Conventional Website

    Yes, that's better thanks Acorn. See attached.
    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

  8. #18
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,325

    Default Re: Leveraging the Conventional Website

    Hopefully the last fix: The Ultimate Conventional Website - Step 8.xar!

    Arithmetic is back on track so jump(n) will now go to page number n.

    Head
    Code:
    <script>
    async function main() {
      page = location.href.split('/').pop();
      xrfls = document.querySelectorAll('[name*="XAR Files"]')[0].content;
      afile = await fetch(xrfls);
      asite = await afile.text();
      pages = asite.replaceAll('\r', '').split('\n').filter(x => x.search(/\.htm/) > 0 );
      pages = [...new Set(pages)];
      i = pages.indexOf(page) + 1;
      a = pages.length;
      next = i%a + 1;
      prev = (i == 1) ? a : i - 1;
    }
    main();
    </script>
    Body
    Code:
    function jump(ndx) {  effect.add('pageout');
      setTimeout(function(){ location.href = pages[ndx - 1]; }, 640);
    }
    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  9. #19
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,891

    Default Re: Leveraging the Conventional Website

    That works for me Acorn
    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

  10. #20
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,325

    Default Re: Leveraging the Conventional Website

    Quote Originally Posted by Egg Bramhill View Post
    That works for me Acorn
    Cheers Egg.

    I tried your design with Stretch Full Width, Scale for the images & Tile for the ring comb. all worked a treat.
    It did show some of my design artefacts as well. Mentioned jut in case you were aiming to use this file further.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

 

 

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
  •