Leveraging the Conventional Website

[Chris M]

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.

[Acorn]

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

[Egg Bramhill]

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>

[Chris M]

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

[Acorn]

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]

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

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

[Egg Bramhill]

Yes, that's better thanks Acorn. See attached.

[Acorn]

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

<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

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

Acorn

[Egg Bramhill]

That works for me Acorn

[Acorn]

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