Home > Lập trình > Javascript > Fancy Input – Tạo hiệu ứng gõ chữ cho thẻ Input

Fancy Input – Tạo hiệu ứng gõ chữ cho thẻ Input

Fancy Input box
Fancy Input box

 

Xem demo tại đây http://clbinternet.info/fancy-input/

Hôm nay giới thiệu tới các bạn một đoạn mã jquery giúp tạo ra những hiệu ứng vui mắt khi ta gõ chữ lên thẻ input trong HTML. Đoạn Jquery này được tạo ra và chia sẻ trên mạng bởi tác giả Yair Even-Or. Yair Even-Or là một web designer và chuyên code về client-side vì vậy mà ông đã sử dụng Jquery cùng với CSS3 để tạo ra nhiều sản phẩm nhằm mục đích làm đẹp cho website. Các bạn có thể tìm và xem demo thêm nhiều đoạn code thú vị hơn tại trang web chính thức của ông tại đây.
Việc sử dụng Fancy Input hết sức đơn giản.
Sẽ có 2 phần mà các bạn cần quan tâm.
Thứ nhất: Chuẩn bị các file fancyInput.css,style.css, fancyInput.js và không thể thiếu thư viện Jquery. sau đó import các file này vào trang html của bạn

Thứ hai: thẻ input của bạn cần phải được code như sau để có thể làm việc

<section class=”input”>
<div class=”fancyInput”>
<input type=”text” placeholder=”type something…” style=”width: 723px;”>
<div data-placeholder=”type something…” class=”empty”><b class=”caret” style=”height: 78px;”>​</b></div></div>
</section>

Vậy là xong các bạn hãy download source code demo về và dùng thử để có cái nhìn trực quan hơn về cách sử dụng nhé

Download source code demo Fancy Input

 

About Huy Nguyễn

Chào mọi người, mình là Huy. Mình thích rất nhiều thứ liên quan đến máy tính, thích web thích lập trình, thích thiết kế ... :3. Thích nhiều thứ, hiện tại mình đang tìm hiểu về Wordpress bạn nào có hứng thú thì trao đổi thêm vs mình nha.

Leave a Reply

%d bloggers like this: