From a design perspective, I love the idea of using transitions to help users orientate themselves but this sometimes lends itself toward activating a transition depending on where you have come from not what page you are on…
For example, take a page like this one http://practicaltypography.com/summary-of-key-rules.html with buttons at the bottom heading left (back) or forward (onward) transitions could reinforce the effect of moving through pages organised ‘like a book’. When you click next > the page could come in from the right BUT you would want the < previous button to come in from the left.
In other words, the same page displays differently depending on what button you press. Is that possible, or is it assumed that transitions are only applied to objects?
Sorry for my ignorance I am looking forward to mastering this!
You do see this effect a lot on sites, although I’ve only seen it done when all of the content is actually on the one same page. So when you click a left/right arrow, a new page appears to slide in … though it is really just another part of the same page that was hidden. I’m not sure if it can be done from one page to another, but I couldn’t find any solutions online.
I wouldn’t imagine this would be too difficult actually.
One way is:
First of all set the page’s container so that it’s css overflow is hidden. Use javascript to get the page containers current width and height and then set it as absolute pixel values. Then with javascript you could simply add on click event listeners to the next/previous buttons. When the next button is clicked, set a interval to move the page to the left, a pixel at a time at the time interval desired. Once the page has been moved to the left enough to have left the page, you can use javascript to load the page originally requested by clicking on the button. Set a script at the start of the new page which moves the page content off to the right so that it is hidden, and then using another javascript interval, let it move pixel by pixel from the right until it is in it’s desired position.
The full effect should seem like an animation of the page sliding along. Sure you won’t see both pages on the page at the same time, one will wipe away and then the other will appear. You can get around this but it is more complicated. It would be too much work to explain in a casual post.
Many thanks, both, for your thoughts. It would be nice to see both pages on the same page wouldn’t it? Smooth. Especially as that’s the expectation from a non-technical point of view. I will let you know if I work it out.
I am looking forward to mastering this!
Smooth. Especially as that’s the expectation from a non-technical point of view. I will let you know if I work it out.