Wholepage slider for passage navigation

Hello everyone!
I was wondering if anyone has ever tried using a slider animation to move inbetween passages, be it horizontally or vertically.
I’m thinking of something like this, but the slider would be triggered when clicking on passage links.
Any tips on how to start coding this?
I’m using SugarCube 2.34.1

Thank you very much!
seedy_cake

1 Like

That effect is likely technically possible but also likely to be “interesting” to implement because it relies on the HTML contents of both “Slides” (in this case Passages) existing at the same time, one being shown and one positioned outside the current view-port window. And that requirement works against behaviour of SugarCube’s Passage Transition process, which removes the HTML contents of the ‘current’ Passage before the HTML contents of the ‘next’ Passage is added to the web-page.

You would likely need to implement the following functionality to achieve the effect you want upon link selection:
1: A means of moving the HTML content of the ‘current’ Passage from the <div class="passage"> element into your own custom element that exists outside the structure of <div id="passages"> element. This movement needs to be done in a way that doesn’t cause the page to flicker, so from the end-user’s visual point of view nothing has happened yet.
eg. Contents of default structure before the movement…

<div id="story" role="main">
	<div id="passages">
		<div id="passage-start" data-passage="Start" class="passage">
			The contents of the current Passage.
		</div>
	</div>
</div>

…possible structure after the movement…

<div id="story" role="main">
	<div id="previous">
		The contents of the current Passage.
	</div>
	<div id="passages">
		<div id="passage-start" data-passage="Start" class="passage">
		</div>
	</div>
</div>

2: A means of causing the Passage Transitioning to the ‘next’ Passage, but in a way that temporary “hides” the new HTML contents of the <div class="passage"> (and possible <div id="passages">) element off screen.
eg, the 2nd of above HTML examples would likely change to something like the following during this step…

<div id="story" role="main">
	<div id="previous">
		The contents of the current Passage.
	</div>
	<div id="passages">
		<div id="passage-second" data-passage="Second" class="passage">
			The contents of the next Passage.
		</div>
	</div>
</div>

3: The code that causes the “slider” effect, that changes from displaying the contents of the ‘current’ Passage to showing the contents of the <div class="passage"> element.
4: Deleting the elements that made up the previous ‘current’ Passage.
eg. in my HTML examples that would likely be the deletion of the <div id="previous"> element.

<div id="story" role="main">
	<div id="passages">
		<div id="passage-second" data-passage="Second" class="passage">
			The contents of the next Passage.
		</div>
	</div>
</div>

5: Implementing your own custom variation of the <<link>> macro (and possibly other macros) that does all of the above…

Thank you Greyelf! I’m afraid your explanations involved concepts that were all too advanced for me to grasp, so I must admit I gave up on the idea of sliding pages alltogether: perhaps it’s something I could have implemented through html had I set up the project and its contents differently.
I ended up settling for different colours to represent each level in the project’s structure, along with a “floor number” within each passage’s header.
Here’s a graph of the structure for clarity’s sake.

I’ve uploaded the project within this thread if you want to check it out. I’ve also uploaded it on my online portfolio if you need more context.
Thanks again for your help!
All the best
seedy_cake

1 Like