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