Desplazamiento horizontal de una página de CSS puro

Vista prévia

Descripción

Una solución CSS pura para crear un sitio web de desplazamiento de una página que le permite navegar entre el contenido seccionado horizontalmente como un control deslizante de página completa.

Funcionamiento

Cree secciones de navegación y contenido de la siguiente manera. Usamos el truco del botón de radio para los disparadores.

<div class="wrapper">


<header>


<label for="section-1-trigger">Section One</label>


<label for="section-2-trigger">Section Two</label>


<label for="section-3-trigger">Section Three</label>


<label for="section-4-trigger">Section Four</label>

</header>


<input id="section-1-trigger" type="radio" name="sections" tabindex="1" checked>



<section class="section section-one">


... Section One ...

</section>

<input id="section-2-trigger" type="radio" name="sections" tabindex="2">

<section class="section section-two">


... Section Two ...

</section>

<input id="section-3-trigger" type="radio" name="sections" tabindex="3">

<section class="section section-three">


... Section Three ...

</section>

<input id="section-4-trigger" type="radio" name="sections" tabindex="4">

<section class="section section-four">


... Section Four ...

</section>

</div>

Los estilos CSS básicos.

.wrapper {

background: #ecf0f1;

color: #fff;

display: block;

height: 100%;

overflow-x: hidden;

position: relative;

text-align: center;

width: 100%;
}

html,
body {

box-sizing: border-box;

font-size: 100%;

height: 100%;

width: 100%;
}

Los estilos CSS principales para la navegación del encabezado.

.wrapper header {

background: rgba(255, 255, 255, 0.5);

color: #222;

font-size: 1rem;

position: relative;

text-align: center;

z-index: 900;
}

.wrapper header label {

cursor: pointer;

display: inline-block;

font-size: 0.667em;

font-weight: bold;

line-height: 3rem;

padding: 0 1em;
}

@media (min-width: 34.6875em) {


.wrapper header label { font-size: 1em; }

}

@media (min-width: 81.25em) {


.wrapper header label { font-size: 1.15em; }

}

.wrapper header label:hover { background: #fff; }

.wrapper header label + label { margin-left: .25em; }

@media (min-width: 31.25em) {


.wrapper header label + label { margin-left: 0em; }

}

@media (min-width: 41.25em) {


.wrapper header label + label { margin-left: 2em; }

}

.wrapper header label span { display: none; }

@media (min-width: 25em) {


.wrapper header label span { display: inline-block; }

}

Los estilos CSS principales para las secciones de contenido.

input {

left: 0;

position: absolute;

top: -1000%;
}

.section {

color: #fff;

display: inline-block;

font-size: 1rem;

height: 100%;

left: 100%;

max-width: 100%;

padding: 3em 1em;

position: absolute;

text-align: center;

top: 0;

vertical-align: top;

-webkit-transition: left 0s .75s;

transition: left 0s .75s;

width: 100%;

z-index: 10;
}

@media (min-width: 28.75em) {


.section { padding: 3em; }

}

@media (min-width: 43.75em) {


.section { padding: 3em; }

}

@media (min-width: 87.5em) {


.section { padding: 3em 6em; }

}

@media (max-height: 26.875em) {


.section { height: auto; }

}

input:checked + .section {

left: 0;

-webkit-transition: left 0.75s cubic-bezier(0.19, 1, 0.22, 1);

transition: left 0.75s cubic-bezier(0.19, 1, 0.22, 1);

-webkit-transition: left 0.75s cubic-bezier(0, 1.2, 0.89, 1.3);

transition: left 0.75s cubic-bezier(0, 1.2, 0.89, 1.3);

z-index: 100;
}