Hiệu ứng TEXT độc đáo với HTML5, CSS3 và Javascript

Sau đây mình sẽ giới hiệu cho các bạn cách kết hợp một tí HTML và CSS thêm tí Javascipt nữa để tạo một hiệu ứng text vô cùng độc đáo. Ở ví dụ này mình sẽ sử dụng HTML5 và CSS3. Cụ thể là chúng ta đã có sẵn tất cả các hình ảnh GIF có hiệu ứng như bên dưới trong bản chữ cái, làm theo hướng dẫn dưới đây bạn sẽ có một page nhập hiệu ứng TEXT hấp dẫn.

hieu-ung-text-doc-dao-voi-html5-css3-va-javascript

Toàn bộ page này chúng ta sẽ làm trên 1 file duy nhất, các hình ảnh theo text tương ứng đã được mình lấy link trực tiếp. Chúng ta khai báo là theo định dạng HTML5 <!DOCTYPE html> nhá.

Hiệu ứng TEXT độc đáo với HTML5, CSS3 và Javascript

CSS chúng ta sẽ định dạng như sau:

<style>
html {
 height: 100%;
 }
 body {
 margin: 0px;
 height: 100%;
 background-color: #000;
 overflow: hidden;
 }
 #text {
 position: absolute;
 top: -500px;
 }
 #logo {
 position: absolute;
 bottom: 50px;
 width: 207px;
 left: calc( ( 100% - 207px ) / 2 );
 }
 #logo:hover{
 opacity: 0.5;
 }
 .char {
 width: 130px;
 }
 @-webkit-keyframes blink { 50% { visibility: hidden; } }
 @-moz-keyframes blink { 50% { visibility: hidden; } }
 @keyframes blink { 50% { visibility: hidden; } }
 #cursor {
 -webkit-animation: blink 0.5s alternate steps(1) infinite;
 -moz-animation: blink 0.5s alternate steps(1) infinite;
 animation: blink 0.5s alternate steps(1) infinite;
 display: inline-block;
 width: 1px;
 height: 130px;
 background-color: #222;
 }
 @media all and ( max-width: 640px ) {
 .char {
 width: 70px;
 }
 #cursor {
 height: 70px;
 }
 }
 </style>

Ở trong phần <body> ta dùng đoạn Javascript sau để tạo sự kiện nhập ký tự bất kỳ từ bàn phí và hiện ra hình ảnh tương ứng của ký tự đó.

<textarea id="text"></textarea>
 <script>
 var srcs = {
 'a': 'http://31.media.tumblr.com/20ae44facf799ce9bcf1a8481775c889/tumblr_n456qu43tg1trqv04o1_500.gif',
 'b': 'http://37.media.tumblr.com/c7613dd3db0ffa5f27d34ee43ffcf75d/tumblr_n456qbIftL1trqv04o1_500.gif',
 'c': 'http://24.media.tumblr.com/5f499b923aad02eb5d94c49a500f81bb/tumblr_n456pwSQoc1trqv04o1_500.gif',
 'd': 'http://31.media.tumblr.com/c747ed08621fb7718fe30a43b15f5921/tumblr_n456pg11XN1trqv04o1_500.gif',
 'e': 'http://24.media.tumblr.com/2a654afe3391093e1fb7eed5db5e3a38/tumblr_n456oyrnfT1trqv04o1_500.gif',
 'f': 'http://37.media.tumblr.com/9f02710cd87a3d9d7ceed5cddde20392/tumblr_n456oird6k1trqv04o1_500.gif',
 'g': 'http://37.media.tumblr.com/1565f057651451085c6c36d39b5e4094/tumblr_n456o2Rdwj1trqv04o1_500.gif',
 'h': 'http://24.media.tumblr.com/7d60ef9c64ff193b115cf58b1ef5dbf4/tumblr_n456niGbzJ1trqv04o1_500.gif',
 'i': 'http://24.media.tumblr.com/e6679a2e66fbedb3537c409436678251/tumblr_n456mwEvWz1trqv04o1_500.gif',
 'j': 'http://37.media.tumblr.com/353e0ab522f7e70a4497c6aae83819fd/tumblr_n456mjIAte1trqv04o1_500.gif',
 'k': 'http://24.media.tumblr.com/78f23b78e2db0d57c338c7c6ed942071/tumblr_n456ltw5Pq1trqv04o1_500.gif',
 'l': 'http://37.media.tumblr.com/98fa69a352e85aac98a0101890767f55/tumblr_n456lbzN3I1trqv04o1_500.gif',
 'm': 'http://37.media.tumblr.com/1ef69ff354af8e2423a92cff5cdeb512/tumblr_n456kntYIn1trqv04o1_500.gif',
 'n': 'http://24.media.tumblr.com/9f9731a5ba06cb84ce05df83e75523c0/tumblr_n456k5zcDm1trqv04o1_500.gif',
 'o': 'http://24.media.tumblr.com/984b827c9ea2d44fb48af4795ad58ac0/tumblr_n456jkxADw1trqv04o1_500.gif',
 'p': 'http://24.media.tumblr.com/05bbf14424c0d8a382f7fc7f0e7aea50/tumblr_n456imRf8U1trqv04o1_500.gif',
 'q': 'http://24.media.tumblr.com/b1deace4c5f75ba0fcf5c2a752ca34d3/tumblr_n456hreKmj1trqv04o1_500.gif',
 'r': 'http://24.media.tumblr.com/9d036ede608eaeab0530b4a1d65c2e8b/tumblr_n456ha6zBk1trqv04o1_500.gif',
 's': 'http://31.media.tumblr.com/38ef46c238c3b0bf934054a0e090fbc4/tumblr_n456gnye8z1trqv04o1_500.gif',
 't': 'http://24.media.tumblr.com/4d69a7aca957b07638d84d1588cf7c70/tumblr_n456g3KyD91trqv04o1_500.gif',
 'u': 'http://37.media.tumblr.com/918d0e25af1ce4f392f35a5ced59a4e0/tumblr_n456fcLsf31trqv04o1_500.gif',
 'v': 'http://37.media.tumblr.com/63981e47b7786ad8b96767802ade1f5a/tumblr_n456evf3eZ1trqv04o1_500.gif',
 'w': 'http://31.media.tumblr.com/6bc4e8e4377c19a70e076fb417590b70/tumblr_n456ecahuh1trqv04o1_500.gif',
 'x': 'http://37.media.tumblr.com/42bb7f0ad371f5fe7ad9f38d13f8e616/tumblr_n456diXU3V1trqv04o1_500.gif',
 'y': 'http://37.media.tumblr.com/6c2ed7c1bfac97f48514c00db28f2c8a/tumblr_n456cse6G41trqv04o1_500.gif',
 'z': 'http://37.media.tumblr.com/e78dc15b31b020dd389e5c4acf62f948/tumblr_n455qogYH01trqv04o1_500.gif',
 ' ': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII='
 };
 
 var input = document.getElementById( 'text' );
 input.focus();
 input.value = 'melyweb';
 
 var container = document.createElement( 'div' );
 container.style.width = '100%';
 container.style.height = '100%';
 container.style.display = 'table';
 container.style.textAlign = 'center';
 document.body.appendChild( container );
 
 var pad = document.createElement( 'div' );
 pad.style.display = 'table-cell';
 pad.style.verticalAlign = 'middle';
 container.appendChild( pad );
 
 var currentString = '';
 
 var type = function ( string ) {
 
 if ( string === currentString ) return;
 
 currentString = string;
 
 while ( pad.childNodes.length > 0 ) {
 
 pad.removeChild( pad.firstChild );
 
 }
 
 var chars = string.split( '' );
 
 for ( var i = 0; i < chars.length; i ++ ) {
 
 var char = chars[ i ];
 
 if ( char === 'n' ) {
 
 var br = document.createElement( 'br' );
 pad.appendChild( br );
 
 continue;
 
 }
 
 var src = srcs[ char.toLowerCase() ];
 
 if ( src !== undefined ) {
 
 var img = document.createElement( 'img' );
 img.className = 'char';
 img.src = src;
 pad.appendChild( img );
 
 }
 
 }
 
 var cursor = document.createElement( 'div' );
 cursor.id = 'cursor';
 pad.appendChild( cursor );
 
 };
 
 type( input.value );
 
 document.addEventListener( 'keydown', function ( event ) {
 
 type( input.value );
 
 } );
 
 document.addEventListener( 'keyup', function ( event ) {
 
 type( input.value );
 
 } );
 
 document.addEventListener( 'mouseup', function ( event ) {
 
 input.focus();
 
 } );
 
 </script>

Như vậy bạn có thể tạo ra một page nhập text có hiệu ứng rất riêng biệt. Nếu các bạn có bất kỳ câu hỏi gì cứ để lại câu hỏi ở comment bên dưới. Chúc các bạn thành công!

Hiệu ứng TEXT độc đáo với HTML5, CSS3 và Javascript 1.85/5 (37.04%) 27 votes

Hãy bình luận, góp ý bằng Disqus để được hồi đáp nhanh hơn!
Sử dụng Facebook hoặc Google nếu không load được Disqus

Nhận nhiều thông tin bổ ích và quà tặng hấp dẫn
từ MELYWEB

Theo dõi blog MELYWEB để nhận được các tin tức bổ ích, khuyến mãi mới nhất, các quà tặng hấp dẫn.