Leveraging the Conventional Website

[Acorn]

Wrapping up Time
You can effectively transform a Conventional website (D-site) into a Transitions website (C-site), taking control of:

1. The payload.
2. Different page Pasteboard backgrounds, without reverting to coding for them.
3. Retention of a normal URL page address.

This can be achieved with relatively little additions to the D-site design:

1. CSS for the Effects
2. JavaScript to discover the website details.
3. JavaScript/jQuery to do the calculations.
4. Page changes to apply the Effects.

ONE
Xara already uses animate.css for its Effects.
We can call these directly by using the 'page' @keyframe names in the Stylesheets ani.css.
I have listed these in the attached design file under pagein & pageout.
There is nothing to stop you developing your own styles: short and subtle is best.
I have provided off-page Text Areas for the CSS Placeholders; there should be one of each pagein & pageout on each design page.
These can be kept in the Page > HTML code (head) instead.
If you just want the same pagein & pageout through then put both in the Website > HTML Code (head).
Xara has used jQuery to invoke the pagein & pageout Effects so I have ensured jQuery is loaded by making a shape on each design page Sticky. Most sites have a sticky NavBar so use that.

TWO
I run a script from the Website HTML Code (head) to discover all the D-site page filenames.

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

A second collection of jQuery and JavaScript functions is loaded later by the Website > HTML Code (body). These functions:

• Make the pagein Effect fire on page load.
• Make the pageout effect fire on page unload.
• Determine what to do on page control with the Arrow Keys.

<script>
var effect = document.body.classList;
effect.add('pagein');
setTimeout(function(){ effect.remove('pagein'); }, 800);

function jump(ndx) {
  effect.add('pageout');
  setTimeout(function(){ location.href = pages[ndx]; }, 640);
}

$(window).scroll(function() {
  bottom = false;
  if($(window).scrollTop() + $(window).height() > $(document).height() - 10) bottom = true;
});

document.body.setAttribute('onkeydown', 'paging(event)');
function paging(event) {
  var kd = event.key;
  if (kd.search('Arrow') >= 0) {
    switch(kd) {
      case 'ArrowLeft': jump(prev); break;
      case 'ArrowRight': jump(next); break;
      case 'ArrowUp': if(window.pageYOffset === 0) jump(prev); break;
      case 'ArrowDown': if (bottom) jump(next); break;
      default:
    }
  }
}
</script>

FOUR
The last part is around page Links:

• Link to: <Next page> becomes javascript: jump(next);
• Link to: <Previous page> becomes javascript: jump(prev);
• Link to: <page filename> becomes javascript: jump(pages.indexOf('<page filename>.htm'));

DESIGN FILE
The design file has a number of working examples: The Ultimate Conventional Website - Step 6.xar
The code has been tidied up since the start of the Thread, through which I hope you have been able to follow the Steps of this journey.

The rationale for this alternative approach is I see appalling overuse of Supersites and Variants combined where I feel there is an arrogance in forcing a large download (especially on metered mobile and slow connections) that do a disservice to the high quality designs that are delivered by us through our XDAs.

Acorn