[Pure CSS] - One page scroll

index.pug

// Inputs
input(type="radio" name="item" checked)#section1
input(type="radio" name="item")#section2
input(type="radio" name="item")#section3
input(type="radio" name="item")#section4

// Navigation
nav.nav
  - for(var i = 1; i < 5; i++)
    label(for="section" + i).nav__item

// Sections
each val in ['One Page', 'Pure CSS', 'Full Screen', '@Ver_Qn']
  section
    h1= val
    
// Fix the white space when scrolling two sections at the time
.cover

pure-css-one-page-scroll.markdown

[Pure CSS] - One page scroll

Not a single line of JavaScript !

A Pen by khuongyolo on CodePen.

License.

script.js

// No JavaScript

style.scss

@import url(https://fonts.googleapis.com/css?family=Carter+One);

$colors: #f8b195, #c06c85, #6c5c7c, #345d7e;

// Inputs
input[type='radio'] {
  display: none;
}

@for $i from 1 through length($colors) {
  input[type='radio']#section#{$i}:checked ~ nav label[for='section#{$i}'] {
    background-color: white;
  }
  
  input[type='radio']#section#{$i}:checked ~ section:nth-of-type(#{$i}) { 
    z-index: 1;
    top: 0;
    transition: top 0.5s ease-in-out;
    transition-delay: 0s;
  }
  
  input[type='radio']#section#{$i}:checked ~ .cover { 
   background-color: nth($colors, $i);
  }
}


// Navigation
.nav {
  position: fixed;
  z-index: 2;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  
  &__item {
    width: 12px;
    height: 12px;
    display: block;
    margin: 12px auto;
    border: solid 2px white;
    border-radius: 50%;
    cursor: pointer;
    
    &:hover {
      background-color: white;
    }
  }
}


// Sections
section {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 100%; right: 0; left: 0;
  transition-delay: 0.5s;
}

@for $i from 1 through 4 {
  section:nth-of-type(#{$i}) {
    background: nth($colors, $i);
  }
}


// Fix the white-space
.cover {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
}


// Base
html,
body {
  height: 100%;
}

body {
  overflow: hidden;
  color: white;
  font: 100% 'Carter One', cursive;
}

h1 {
  font-size: 6em;
  text-align: center;
}