0
146
VisualizaçõesTransición de una página hacia los lados
Tengo un sitio web que básicamente tiene 2 páginas. En total, hay 3 secciones, con la primera página mostrando la izquierda y el medio, y la segunda mostrando el medio y la derecha. Me pregunto si hay una manera simple de hacer una transición horizontal entre las 2 páginas. Se vería algo así con la transición:
Un problema adicional surge cuando necesita cambiar el tamaño de la ventana. En ese caso, las secciones A y C deberían agrandarse y la transición debería cambiar en consecuencia, mientras que B tiene un ancho fijo.
Creo que la mejor manera es crear una sola página porque la carga rompe la inmersión, pero si es más simple crear 2 páginas debido al diseño web receptivo, entonces está bien. La forma más fácil que se me ocurrió es mover la cámara del usuario hacia los lados, pero el diseño web receptivo lo complica.
1 Respostas
Responde à pergunta0
Una vez que conocemos el ancho de B, podemos configurar todo para que esté en columnas.
Este fragmento usa cuadrícula para hacer esto con los elementos primero y tercero ocupando el espacio restante en la ventana gráfica.
Al usar CSS calc para determinar la cantidad que debe traducirse para moverse hacia adelante y hacia atrás, todo responde y se ajustará a diferentes anchos de ventana/dispositivo.
* { 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>