CSS Interaction Using Text Input Focus

HTML
<div id='view'> <input class='center' id='click-me' placeholder='Click Me' tabindex='1'> <div class='center' id='intro-2'> Press Tab </div> <input id='input-1' name='nav' tabindex='2' type='text'> <div class='center' id='block-1'> This page is boring </div> <input id='input-2' name='nav' tabindex='3' type='text'> <div class='center' id='block-2'> until you realize </div> <input id='input-3' name='nav' tabindex='4' type='text'> <div class='center' id='block-3'> it doesn't use javascript. </div> </div>
SCSS
body { background: white; } #view { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } #click-me { box-shadow: none; border: none; &:focus { outline: none; left: 100%; &::-webkit-input-placeholder { color: white; } ~ #intro-2 { opacity: 1; pointer-events: all; } } } #intro-2 { opacity: 0; pointer-events: none; z-index: 9; } #block-1 { opacity: 0; pointer-events: none; height: 36px; } #input-1 { opacity: 0; position: absolute; &:focus ~ { #block-1 { opacity: 1; } #click-me { left: 100%; } } } #block-2 { opacity: 0; pointer-events: none; height: 36px; } #input-2 { opacity: 0; position: absolute; &:focus ~ { #block-2 { opacity: 1; } #click-me { left: 100%; } } } #block-3 { opacity: 0; pointer-events: none; height: 36px; } #input-3 { opacity: 0; position: absolute; &:focus ~ { #block-3 { opacity: 1; } #click-me { left: 100%; } } } .center { text-align: center; position: absolute; top: 50%; left: 0; height: 36px; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-weight: 100; font-size: 36px; display: block; background: white; -webkit-transition: opacity 200ms; transition: opacity 200ms; cursor: pointer; }
JAVASCRIPT
Expand for more options Login