<div class="container">
<div id="form-wrap">
<!-- Question One -->
<div class="question">
<h1>What's your name?</h1>
<input type="text"></input>
<button></button>
</div>
<!-- Question Two -->
<div class="question">
<h1>What's your favorite color?</h1>
<input type="text"></input>
<button></button>
</div>
<!-- Question Three -->
<div class="question">
<h1>What's your favorite food?</h1>
<input type="text"></input>
<button></button>
</div>
<!-- Question Four -->
<div class="question">
<h1>Who's your favorite superhero?</h1>
<input type="text"></input>
<button></button>
</div>
<!-- Question Five -->
<div class="question">
<h1>What's your favorite movie?</h1>
<input type="text"></input>
<button></button>
</div>
<!-- Completion Message -->
<div class="completed">
<img src="https://media.giphy.com/media/XBumSnvroiGxUSoDkZ/giphy.gif">
<h1>Thank you for your input!</h1>
</div>
</div> <!--#form-wrap-->
</div> <!--.container-->
@import url(https://fonts.googleapis.com/css?family=Space+Mono:400,700);
/* === Quick Settings === */
:root {
/* Colors */
--primary: #3F46DC;
--secondary: #FFFFFF;
--background: #F6F7FB;
--text: #3C3C69;
--shadow: rgba(37,40,122,.09);
/* Type */
--font: 'Space Mono', monospace;
/* Styles */
--corner-radius: 10px;
--stroke-thickness: 4px;
}
/* === Global === */
*, *:focus {
font-family: var(--font);
outline: none;
}
body {
background: var(--background);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 480px;
padding: 0 60px 0 60px;
overflow: hidden;
position: relative;
}
#form-wrap{
transition: all 800ms ease-in-out
}
.completed, .completed h1 {
text-align: center;
margin:0;
}
img {
max-height: 100px;
}
/* === Questions === */
.question {
display: grid;
grid-template-columns: 1fr 60px;
grid-template-rows: repeat(3, 60px);
grid-column-gap: 20px;
grid-row-gap: 0px;
transition: all 250ms ease-in-out;
}
h1 {
font-weight: 400;
font-size: 22px;
grid-area: 1 / 1 / 2 / 3;
}
h1.animation {
animation: input-animation 1200ms ease-in-out;
}
input, button {
background: linear-gradient(to right, var(--secondary) 0%, var(--secondary) 33.2%, var(--primary) 33.3%, var(--primary) 66.5%, var(--secondary) 66.6%, var(--secondary) 100% );
background-size: 302% 100%;
background-position: 100% 100%;
border-radius: var(--corner-radius);
box-shadow: 0px 20px 40px 0 var(--shadow);
border: none;
}
input:hover, button:hover {
box-shadow: 0px 10px 20px 0 var(--shadow), inset 0px 0px 0px var(--stroke-thickness) var(--primary);
}
input:active, input:focus, button:active, button:focus {
background-position: 49.75% 100%;
color: var(--secondary);
box-shadow: 0px 0px 0px 0 var(--shadow);
}
input {
color: var(--text);
font-size: 18px;
padding: 0 20px;
grid-area: 2 / 1 / 3 / 2;
border-radius: var(--corner-radius);
box-shadow: 0px 20px 40px 0 var(--shadow);
transition: all 200ms ease-in-out;
}
input.animation {
animation: input-animation 1000ms ease-in-out;
}
button {
grid-area: 2 / 2 / 3 / 3;
transition: all 150ms ease;
cursor: pointer;
}
button:after {
content:'➜';
font-size: 24px;
color:var(--primary);
}
button:focus:after {
color:var(--secondary);
}
button.animation {
animation: button-animation 1000ms ease 200ms;
}
p {
grid-area: 3 / 1 / 4 / 3;
opacity: .25;
}
p.animation {
animation: index-animation 1100ms ease;
}
@keyframes h1-animation {
0% {transform: translateY(0);}
20% {transform: translateY(20px);}
60% {transform: translateY(-10px);}
100% {transform: translateY(0px);}
}
@keyframes input-animation {
0% {transform: translateY(0);}
20% {transform: translateY(20px);}
60% {transform: translateY(-20px);}
100% {transform: translateY(0px);}
}
@keyframes button-animation {
0% {transform: translateY(0);}
20% {transform: translateY(20px);}
60% {transform: translateY(-20px);}
100% {transform: translateY(0px);}
}
@keyframes index-animation {
0% {opacity: .25}
20% {opacity: 0}
80% {opacity: 0;}
100% {opacity: .25}
}
// Take it easy, I'm a designer, not a developer. :)
// Setting some baseline variables
var quantityOfQuestions = $('.question').length;
var questionHeight = $('.question').height();
var stepHeight = ($('#form-wrap').height() - $('.completed').height()) / quantityOfQuestions;
// On page ready remove tabbability on future questions, set focus, set container height based on question height
$('input:not(:first), button:not(:first)').attr('tabindex', '-1');
$('.question:first input').focus();
$('.container').css({"height": questionHeight});
// Create question index "question 1 / 5"
$( '.question' ).each(function( index ) {
$(this).append('<p>question ' + (index + 1) + ' / ' + quantityOfQuestions + '</p>' )
});
// Alternative transition for Inputs when button is focused - create spillover effect
$("button").focus(function() {
$(this).siblings('input').css({"background-position":"-1% 100%","transition-delay":"0"})
});
// Remove the alternative transition set above on button focusout
$("button").focusout(function() {
$(this).siblings('input').css("background-position","")
});
// On button click do the following
$('button').click(function() {
//set variables in context of current & next question
var currentQuestion = $(this).parent();
var nextQuestion = $(this).parent().next('.question');
var nextInput = $(nextQuestion).children('input');
var nextButton = $(nextQuestion).children('button');
//Move the question container down
$('#form-wrap').css({"marginTop": '-=' + stepHeight});
//Add animations to controls, and set tab index for next question
$('input, button, h1, p').addClass('animation');
$('input, button').attr('tabindex', '-1');
$(nextInput).attr('tabindex', '1');
$(nextButton).attr('tabindex', '2');
$(currentQuestion).css({"opacity": '0'});
$(nextQuestion).css({"opacity": '1'});
//After animation, set focus and remove animations classes set above
setTimeout(function(){
$(nextInput).focus();
$('input, button, h1, p').removeClass('animation');
}, 1100);
});
This Pen doesn't use any external CSS resources.