<body>
<div id="namer">
<div id="namer-input">
<input type="text" name="namername" placeholder="Type your name">
</div>
<div class="namer-controls">
<div><span>serious</span></div>
<div><span>modern</span></div>
<div><span>cheeky</span></div>
</div>
</div>
<a id="hastylink" target="_blank" href="https://www.wp-hasty.com/">Are you a WordPress developer?<br>Then click to check out my latest project Hasty!</a>
</body>@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Andada|Permanent+Marker|Raleway:300');
* {
box-sizing: border-box;
}
body {
background: #2196F3;
position: relative;
font-family: 'Roboto', sans-serif;
color: #fff;
}
#namer {
position: relative;
max-width: 400px;
margin: 150px auto 0;
}
#namer input {
border: 0;
border-bottom: 2px solid #1976D2;
width: 100%;
font-size: 30px;
line-height: 35px;
height: 70px;
text-align: center;
padding: 10px;
background: transparent;
color: #BBDEFB;
}
#namer input.shake {
animation-name: shaker;
animation-duration: 200ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
#namer input:focus {
outline: 0;
color: #BBDEFB;
}
#namer input::placeholder {
color: #1976D2;
}
.namer-controls {
position: relative;
display: block;
height: 30px;
margin: 20px 0;
text-align: center;
opacity: 0.3;
cursor: not-allowed;
}
.namer-controls.active {
opacity: 1;
cursor: pointer;
}
.namer-controls div {
float: left;
width: 33.33%;
}
.namer-controls div span {
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
padding: 10px 5px;
width: 95%;
display: inline-block;
margin-right: 5%;
border-radius: 30px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.namer-controls div span:last-child {
margin-right: 0;
}
.namer-controls div span.active {
box-shadow: none;
background-color: #1976D2;
color: #fff;
}
#namer-input.serious input {
letter-spacing: 2px;
text-transform: uppercase;
font-family: 'Andada', serif;
font-weight: 500;
}
#namer-input.modern input {
font-family: 'Raleway', sans-serif;
text-transform: lowercase;
font-weight: 300;
letter-spacing: 10px;
}
#namer-input.cheeky input {
font-family: 'Permanent Marker', cursive;
font-size: 40px;
}
@keyframes shaker {
0% {
transform: translate(0px, 0px) rotate(0deg);
opacity: 0.8;
}
10% {
transform: translate(10px, 7px) rotate(-9deg);
opacity: 0.6;
}
20% {
transform: translate(13px, -19px) rotate(-3deg);
opacity: 0.3;
}
30% {
transform: translate(-6px, -6px) rotate(2deg);
opacity: 0.4;
}
40% {
transform: translate(-9px, -18px) rotate(-5deg);
opacity: 0.4;
}
50% {
transform: translate(10px, -8px) rotate(5deg);
opacity: 0.7;
}
60% {
transform: translate(-10px, 14px) rotate(-6deg);
opacity: 1;
}
70% {
transform: translate(10px, 3px) rotate(6deg);
opacity: 0.1;
}
80% {
transform: translate(-2px, 20px) rotate(-6deg);
opacity: 1;
}
90% {
transform: translate(-7px, -19px) rotate(2deg);
opacity: 0.5;
}
}
#hastylink {
position: fixed;
bottom:5px;
left: 0;
right: 0;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
letter-spacing: 1px;
opacity: 0.5;
}
#hastylink:hover {
opacity: 1
}$("#namer input").on("change keyup paste", function() {
var inputValue = $(this).val();
if (inputValue) {
$(".namer-controls").addClass("active");
$("#namer").addClass("active");
} else {
$(".namer-controls").removeClass("active");
$("#namer").removeClass("active");
}
});
$(document).on("click", ".namer-controls.active span", function() {
if ($(this).hasClass("active")) {
$(".namer-controls span").removeClass("active");
$("#namer-input input").addClass("shake");
setTimeout(function() {
$("#namer-input input").removeClass("shake");
}, 400);
$("#namer-input").removeClass();
} else {
$(".namer-controls span").removeClass("active");
$(this).addClass("active");
var styleClass = $(this).text();
$("#namer-input input").addClass("shake");
setTimeout(function() {
$("#namer-input input").removeClass("shake");
}, 400);
$("#namer-input").removeClass();
$("#namer-input").addClass(styleClass);
}
});
$(document).ready(function() {
$("#namer-input input").focus();
});
External CSS
This Pen doesn't use any external CSS resources.