Pure CSS Horizontal One Page Scrolling

Preview:

Description:

A pure CSS solution to create a one page scrolling website which allows you to navigate between sectioned content horizontally like a full page slider.

How to use it:

Create navigation and content sections as follows. We use radio button trick for the triggers.

<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>

The basic CSS styles.

.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%;
}

The core CSS styles for the header navigation.

.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; }
}

The core CSS styles for the content sections.

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;
}