0
138
ViewsTransition a page sideways
I have a website that basically has 2 pages. In total, there is 3 sections, with the first page showing the left and the middle, and the second showing the middle and the right. I'm wondering if there is a simple way to transition horizontally between the 2 pages. It would look something like this with the transition:
An extra problem comes when you need to resize the window. In that case, section A and C should get bigger and the transition should change accordingly while B is fixed width.
I think the best way is to create a single page because the loading breaks the immersion, but if it is simpler to create 2 pages because of the responsive web design then its fine. The easiest way I could think of is to move the user camera sideways, but the responsive web design complicates it.
1 answers
Answer question0
Once we know the width of B we can set the whole thing up to be in columns.
This snippet uses grid to do this with the first and third items taking up any remaining space in the viewport.
By using CSS calc to ascertain the amount that has to be translated to move back and forth the whole thing is responsive and will adjust to different viewport/device widths.
* {
margin: 0;
}
body {
overflow: hidden;
}
button {
position: fixed;
z-index: 1;
}
.container {
/* set the width of the second item */
--bW: 200px;
width: calc(2 * (100vw - var(--bW)) + var(--bW));
height: 100vh;
display: grid;
grid-template-columns: 1fr var(--bW) 1fr;
transform: translateX(0);
transition: transform 1s ease;
overflow: hidden;
}
.slid {
transform: translateX(calc(-100vw + var(--bW)));
}
.container>* {
height: 100%;
display: inline-block;
}
.container> :nth-child(1) {
background: magenta;
}
.container> :nth-child(2) {
background: purple;
}
.container> :nth-child(3) {
background: teal;
}<button onclick="document.querySelector('.container').classList.toggle('slid');">CLICK ME TO SLIDE</button>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>