Loading

Input Live Style Changer

This input can change his style via 3 buttons to serious, modern or cheeky with a nice style animation.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Input Live Style Changer</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <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>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
@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 {
 -webkit-animation-name: shaker;
         animation-name: shaker;
 -webkit-animation-duration: 200ms;
         animation-duration: 200ms;
 -webkit-animation-timing-function: ease-in-out;
         animation-timing-function: ease-in-out;
 -webkit-animation-delay: 0s;
         animation-delay: 0s;
}

#namer input:focus {
 outline: 0;
	color: #BBDEFB;
}

#namer input::-webkit-input-placeholder {
 color: #1976D2;
}

#namer input::-moz-placeholder {
 color: #1976D2;
}

#namer input:-ms-input-placeholder {
 color: #1976D2;
}

#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;
}

@-webkit-keyframes shaker {
 0% {
  -webkit-transform: translate(0px, 0px) rotate(0deg);
          transform: translate(0px, 0px) rotate(0deg);
  opacity: 0.8;
 }
 10% {
  -webkit-transform: translate(10px, 7px) rotate(-9deg);
          transform: translate(10px, 7px) rotate(-9deg);
  opacity: 0.6;
 }
 20% {
  -webkit-transform: translate(13px, -19px) rotate(-3deg);
          transform: translate(13px, -19px) rotate(-3deg);
  opacity: 0.3;
 }
 30% {
  -webkit-transform: translate(-6px, -6px) rotate(2deg);
          transform: translate(-6px, -6px) rotate(2deg);
  opacity: 0.4;
 }
 40% {
  -webkit-transform: translate(-9px, -18px) rotate(-5deg);
          transform: translate(-9px, -18px) rotate(-5deg);
  opacity: 0.4;
 }
 50% {
  -webkit-transform: translate(10px, -8px) rotate(5deg);
          transform: translate(10px, -8px) rotate(5deg);
  opacity: 0.7;
 }
 60% {
  -webkit-transform: translate(-10px, 14px) rotate(-6deg);
          transform: translate(-10px, 14px) rotate(-6deg);
  opacity: 1;
 }
 70% {
  -webkit-transform: translate(10px, 3px) rotate(6deg);
          transform: translate(10px, 3px) rotate(6deg);
  opacity: 0.1;
 }
 80% {
  -webkit-transform: translate(-2px, 20px) rotate(-6deg);
          transform: translate(-2px, 20px) rotate(-6deg);
  opacity: 1;
 }
 90% {
  -webkit-transform: translate(-7px, -19px) rotate(2deg);
          transform: translate(-7px, -19px) rotate(2deg);
  opacity: 0.5;
 }
}

@keyframes shaker {
 0% {
  -webkit-transform: translate(0px, 0px) rotate(0deg);
          transform: translate(0px, 0px) rotate(0deg);
  opacity: 0.8;
 }
 10% {
  -webkit-transform: translate(10px, 7px) rotate(-9deg);
          transform: translate(10px, 7px) rotate(-9deg);
  opacity: 0.6;
 }
 20% {
  -webkit-transform: translate(13px, -19px) rotate(-3deg);
          transform: translate(13px, -19px) rotate(-3deg);
  opacity: 0.3;
 }
 30% {
  -webkit-transform: translate(-6px, -6px) rotate(2deg);
          transform: translate(-6px, -6px) rotate(2deg);
  opacity: 0.4;
 }
 40% {
  -webkit-transform: translate(-9px, -18px) rotate(-5deg);
          transform: translate(-9px, -18px) rotate(-5deg);
  opacity: 0.4;
 }
 50% {
  -webkit-transform: translate(10px, -8px) rotate(5deg);
          transform: translate(10px, -8px) rotate(5deg);
  opacity: 0.7;
 }
 60% {
  -webkit-transform: translate(-10px, 14px) rotate(-6deg);
          transform: translate(-10px, 14px) rotate(-6deg);
  opacity: 1;
 }
 70% {
  -webkit-transform: translate(10px, 3px) rotate(6deg);
          transform: translate(10px, 3px) rotate(6deg);
  opacity: 0.1;
 }
 80% {
  -webkit-transform: translate(-2px, 20px) rotate(-6deg);
          transform: translate(-2px, 20px) rotate(-6deg);
  opacity: 1;
 }
 90% {
  -webkit-transform: translate(-7px, -19px) rotate(2deg);
          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
}
/* Downloaded from https://ahoj.co.uk/ */
$("#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();
});

This awesome code is write by Benjamin Koehler, you can se more from this user in the personal repository