Single input 3D form | Input en 3D con CSS HTML y JS

Single input 3D form only with CSS HTML & JS | Input en 3D con CSS, HTML y JAVASCRIPT.

By Son Tran-Nguyen

Vídeo del Post/DEMO
HTML

<div class="fun-cube"><i class="fa fa-cube"></i></div>
<h1>Single input 3D form</h1>

<!-- heirarchy: #cuboid > form > div*4(cuboid faces) -->
<div id="cuboid">
<form>
<!-- #1 hover button -->
<div>
<p class="cuboid-text">Subscribe</p>
</div>
<!-- #2 text input -->
<div>
<!-- Label to trigger #submit -->
<label for="submit" class="submit-icon">
<i class="fa fa-chevron-right"></i>
</label>
<input type="text" id="email" class="cuboid-text" placeholder="Your Email" autocomplete="off"/>
<!-- hidden submit button -->
<input type="submit" id="submit" />
</div>
<!-- #3 loading message -->
<div>
<p class="cuboid-text loader">Just a moment</p>
</div>
<!-- #4 success message -->
<div>
<!-- reset/retry button -->
<span class="reset-icon"><i class="fa fa-refresh"></i></span>
<p class="cuboid-text">Thank you, for subscribe :D</p>
</div>
</form>
</div>

CSS

*{margin:0;padding:0}
body{background:#70c170;padding-top:150px;font:400 18px Sniglet;color:#fff;text-align:center}
h1{font-weight:400;font-size:36px;margin-bottom:75px}
.fun-cube i{transform:scale(10);opacity:.1}
#cuboid{width:400px;margin:0 auto;perspective:1000px}
#cuboid form{transform:translateZ(-20px);transform-style:preserve-3d;height:40px;transition:all .35s}
.cuboid-text{line-height:40px;height:40px;background:#1e471e}
.loader{background:#2d6b2d;animation:phase 1s infinite}
@keyframes phase{50%{background:#168216}}
#email{background:#fff;outline:0;border:0;font:inherit;text-align:left;color:#2d6b2d;display:block;width:100%;padding:0 10px;box-sizing:border-box}
#submit{display:none}
.reset-icon,.submit-icon{position:absolute;top:0;right:0;color:rgba(0,0,0,.25);line-height:40px;padding:0 10px;transition:all .5s;cursor:pointer}
.submit-icon.active{color:#2d6b2d}
.reset-icon{color:rgba(255,255,255,.25);font-size:14px}
#cuboid div{position:absolute;top:0;left:0;width:100%}
#cuboid div:nth-child(1){transform:rotateX(0deg) translateZ(20px)}
#cuboid div:nth-child(2){transform:rotateX(-90deg) translateZ(20px)}
#cuboid div:nth-child(3){transform:rotateX(-180deg) translateZ(20px)}
#cuboid div:nth-child(4){transform:rotateX(-270deg) translateZ(20px)}
#cuboid form.ready,#cuboid form:hover{transform:translateZ(-20px) rotateX(90deg)}
#cuboid form.loading{transform:translateZ(-20px) rotateX(180deg)}
#cuboid form.complete{transform:translateZ(-20px) rotateX(270deg)}

JS

//jQuery time

//add '.ready' to form when user focuses on it
$("#email").focus(function(){
	$("#cuboid form").addClass("ready");
})
//remove '.ready' when user blus away but only if there is no content
$("#email").blur(function(){
	if($(this).val() == "")
		$("#cuboid form").removeClass("ready");
})

//If the user is typing something make the arrow green/.active
$("#email").keyup(function(){
	//this adds .active class only if the input has some text
	$(".submit-icon").toggleClass("active", $(this).val().length > 0);
})

//on form submit remove .ready and add .loading to the form
$("#cuboid form").submit(function(){
	$(this).removeClass("ready").addClass("loading");
	//finish loading in 3s
	setTimeout(complete, 3000);
	//prevent default form submisson
	return false;
})
function complete()
{
	$("#cuboid form").removeClass("loading").addClass("complete");
}
//reset/refresh functionality
$(".reset-icon").click(function(){
	$("#cuboid form").removeClass("complete");
})
¿Te gusto el post?
¡Compártelo!

Adblock Detectado

Apoya este sitio desactivando el Adblock para seguir navegando. ¡Gracias!

¡Ya Desactive el Adblock!