Tạo hiệu ứng lắc(shake) form với JQueryUI

Thì hôm nay mình có áp dụng cái hiệu ứng này vào trong dự án của mình và thấy nó cũng khá dễ dàng và hay hay nên tiện chia sẻ với các bạn những ai chưa biết làm về hiệu ứng này. Nếu các bạn đã sử dụng WorlPress thì trong form đăng nhập của WordPress cũng áp dụng cái này.

Bạn có thể áp dụng hiệu ứng này vào một số form trong trường hợp khi người dùng nhập vào thông tin không chính xác hoặc thông tin sai.

• Form đăng nhập hoặc đăng ký.
• Form đăng ký nhận bản tin.
• Form đặt hàng, booking.

Nó cũng khá đơn giản. Trong bài viết này mình sử dụng JQuery UI vì trong JQuery UI đã có sẵn hiệu ứng này. Bạn có thể tìm hiểu hiệu ứng này tại JQuery UI Shake Effect 

Trong ví dụ này mình sẽ xây dựng một cái form đăng nhập khi người dùng gõ sai thì sẽ tạo hiệu ứng shake.

• Email:info@chiasephp.com
• Password: 123456

1. HTML

<div id="shake">
    <div class="card card-container">
        <img id="profile-img" class="profile-img-card" src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" />
        <p id="profile-name" class="profile-name-card"></p>
        <form class="form-signin">
            <span id="reauth-email" class="reauth-email"></span>
            <input type="email" id="inputEmail" class="form-control" placeholder="Địa chỉ email" />
            <input type="password" id="inputPassword" class="form-control" placeholder="Mật khẩu">
            <div id="remember" class="checkbox">
                <label>
                    <input type="checkbox" value="remember-me"> Nhớ mật khẩu
                </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block btn-signin" type="button">Đăng nhập</button>
        </form>
        <a href="#" class="forgot-password">Quên mật khẩu </a>
    </div>
</div>

2. CSS

.card-container.card {
	max-awidth: 350px;
	padding: 40px 40px;
}
.btn {
	font-weight: 700;
	height: 36px;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: default;
}
.card {
	background-color: #F7F7F7;
	padding: 20px 25px 30px;
	margin: 0 auto 25px;
	margin-top: 50px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.profile-img-card {
	awidth: 96px;
	height: 96px;
	margin: 0 auto 10px;
	display: block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.profile-name-card {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin: 10px 0 0;
	min-height: 1em;
}
.reauth-email {
	display: block;
	color: #404040;
	line-height: 2;
	margin-bottom: 10px;
	font-size: 14px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.form-signin #inputEmail,
.form-signin #inputPassword {
	direction: ltr;
	height: 44px;
	font-size: 16px;
}
.form-signin input[type=email],
.form-signin input[type=password],
.form-signin input[type=text],
.form-signin button {
	awidth: 100%;
	display: block;
	margin-bottom: 10px;
	z-index: 1;
	position: relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.form-signin .form-control:focus {
	border-color: rgb(104, 145, 162);
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
}
.btn.btn-signin {
	background-color: rgb(104, 145, 162);
	padding: 0px;
	font-weight: 700;
	font-size: 14px;
	height: 36px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: none;
	-o-transition: all 0.218s;
	-moz-transition: all 0.218s;
	-webkit-transition: all 0.218s;
	transition: all 0.218s;
}
.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
	background-color: rgb(12, 97, 33);
}
.forgot-password {
	color: rgb(104, 145, 162);
}
.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus{
	color: rgb(12, 97, 33);
}

3. Javascript

$( ".btn-signin" ).click(function() {
	var email = $("#inputEmail").val();
	var password = $("#inputPassword").val();
	if (email == "info@chiasephp.com" && password == "123456") {
		$("#reauth-email").html("Tài khoản đã được validated!!");
	}
	else{
		$("#shake" ).effect( "shake" );
		$("#reauth-email").html("Email & password không hợp lệ.");
	}
});

4. Tồng kết

Trong JQuery UI có khá nhiều hiệu ứng đẹp bạn có thể tham khảo và áp dụng vào trong project của mình để tăng tính độc đáo cũng như chất lượng cho sản phẩm của mình.