Deslizador de página horizontal de ancho completo con HTML/CSS puro

Vista prévia

Descripción

Un control deslizante de página de ancho completo HTML/CSS que divide su sitio web en varias páginas para que el usuario pueda navegar a través de ellos haciendo clic en la navegación superior. El objetivo es utilizar la entrada de radio HTML y los hacks de etiquetas para alternar entre secciones de contenido.

Funcionamiento

Añada Label base de navegación superior y secciones de contenido a la Página Web.

<div class="page-slider">

<header>


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


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


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

</header>

<input id="slide-1-trigger" type="radio" name="slides" checked>

<section class="slide slide-one">


<h1>Section One</h1>

</section>

<input id="slide-2-trigger" type="radio" name="slides">

<section class="slide slide-two">


<h1>Section Two</h1>

</section>

<input id="slide-3-trigger" type="radio" name="slides">

<section class="slide slide-three">


<h1>Section Three</h1>

</section>
</div>

Haga que el deslizador de página sea ancho y alto.

html, body {

height: 100%;

width: 100%;

margin: 0;

padding: 0;
}

.page-slider {

height: 100%;

width: 100%;

position: relative;

overflow: hidden;

background: #120103;

color: #fff;

text-align: center;
}

Los estilos CSS para la navegación superior.

header {

background: #3e474f;

box-shadow: 0 0.5em 1em #111;

position: absolute;

top: 0;

left: 0;

z-index: 900;

width: 100%;
}

header label {

color: #788188;

cursor: pointer;

display: inline-block;

line-height: 4.25em;

font-size: 1em;

font-weight: bold;

padding: 0 1em;
}

header label:hover { background: #2e353b; }

Los estilos CSS para las secciones de contenido.

.slide {

height: 100%;

width: 100%;

position: absolute;

top: 0;

left: 100%;

z-index: 10;

padding: 8em 1em 0;

background-color: #120103;

background-position: 50% 50%;

background-size: cover;

transition: left 0s 0.75s;
}

Añada imágenes de fondo a las secciones.

.slide-one { background-image: url(bg1.jpg); }

.slide-two { background-image: url(bg2.jpg); }

.slide-three { background-image: url(bg3.jpg); }

Los hacks de entrada de radio + etiqueta.

[id^="slide"]:checked + .slide {

left: 0;

z-index: 100;

transition: left 0.65s ease-out;
}

[id^="slide"]:checked + .slide h1 {

opacity: 1;

transform: translateY(0);

transition: all 0.5s 0.5s;
}