Pure CSS3 Motiony Thing

by Borna Almasi

HTML

<div class="container">

    <input type="radio" name="radio-set" checked="checked" id="control-1"/>
    <a href="#panel-1">Simplicity</a>

    <input type="radio" name="radio-set" id="control-2"/>
    <a href="#panel-2">Functionality</a>

    <input type="radio" name="radio-set" id="control-3"/>
    <a href="#panel-3">Beauty</a>

    <div class="scroll">
        
      <section class="panel" id="panel-1">
        <div class="deco" data-icon="✪"></div>
        <h2>Simplicity</h2>
        <p>I love to keep my code simple and elegant (where possible)</p>
      </section>

      <section class="panel color" id="panel-2">
        <div class="deco" data-icon="☃"></div>
        <h2>Functionality</h2>
        <p>Nothing is impossible. It's only about intvesting the energy.</p>
      </section>

      <section class="panel" id="panel-3">
        <div class="deco" data-icon="☂"></div>
        <h2>Beauty</h2>
        <p>A beautiful design is an effective design</p>
      </section>

    </div><!-- // scroll -->

  </div><!-- // container -->

CSS

body{
    overflow: hidden;
  }

/* Wrapper */
  .container{
    position: absolute;
    width:100%;
    height:100%;
    top: 0;
    left: 0;
    font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
  }

/* Bottom Radio Buttons */
  .container > input,
  .container > a {
    position: fixed;
    bottom: 0px;
    width: 33.3%;
    cursor: pointer;
    font-size: 16px;
    height: 34px;
    line-height: 34px;
  }

/* make sure bottom link have no underlines */
  .container > a {
    text-decoration: none;
  }


  .container > input {
    opacity: 0;
    z-index: 1000;
  }

  .container > a {
    z-index: 10;
    font-weight: 700;
    background: #D87A7A;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
  }

    /* Fill in between the radio elements */
  .container:before {
    content: '';
    position: fixed;
    width: 100%;
    height: 34px;
    background: #D87A7A;
    z-index: 9;
    bottom: 0;
  }
    
  /* Position Radios */
  #control-1, #control-1 + a {
    left: 0;
  }

  #control-2, #control-2 + a {
    left: 33.3%;
  }

  #control-3, #control-3 + a {
    left: 66.6%;
  }
    
    /* Checked and hover states css */
  .container > input:checked + a,
  .container > input:checked:hover + a{
    background: #821114;
  }

    /* the little triangle on selected radio */
  .container > input:checked + a:after,
  .container > input:checked:hover + a:after{
    bottom: 100%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #821134;
    border-width: 20px;
    left: 50%;
    margin-left: -20px;
  }

  .container > input:hover + a{
    background: #AD2425;
  }

  .container > input:hover + a:after {
    border-bottom-color: #AD244F;
  }

  .scroll,
  .panel {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .scroll {
    top: 0;
    left: 0;
    -webkit-transition: all 0.6s ease-in-out;

    /*...

JavaScript

/* WHAT IS THIS SORCERY?!?! NO JAVASCRIPT?!?! */