GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam

AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam

HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ

Trang chủ >> WapMaster

Tìm Kiếm → Thảo Luận

Share code Hiệu ứng Text gai góc cực độc đáo với HTML5, CSS3 và JavaScript

RoSino18k

18-05-2016

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í JavaScript 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ảng 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.

Share code Hiệu ứng Text gai góc cực độc đáo với HTML5, CSS3 và JavaScript
[Tải ảnh]

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:

Ở 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ím và hiện ra hình ảnh tương ứng của ký tự đó.

<textarea id="text"></textarea>

 <script>

 var srcs = {

 'a': 'http://i.imgur.com/H5Q8vey.gif',

 'b': 'http://i.imgur.com/rBvjp8r.gif',

 'c': 'http://i.imgur.com/rpkx9ot.gif',

 'd': 'http://i.imgur.com/rGzDw9A.gif',

 'e': 'http://i.imgur.com/x1amLGT.gif',

 'f': 'http://i.imgur.com/OFed4Xp.gif',

 'g': 'http://i.imgur.com/akXnam7.gif',

 'h': 'http://i.imgur.com/5bPtehG.gif',

 'i': 'http://i.imgur.com/f52xpLS.gif',

 'j': 'http://i.imgur.com/UYB8IqV.gif',

 'k': 'http://i.imgur.com/moNjhVq.gif',

 'l': 'http://i.imgur.com/5nHrPjd.gif',

 'm': 'http://i.imgur.com/n3DOxM1.gif',

 'n': 'http://i.imgur.com/tMLfnDZ.gif',

 'o': 'http://i.imgur.com/9mhbGoX.gif',

 'p': 'http://i.imgur.com/wsZuq7O.gif',

 'q': 'http://i.imgur.com/BGcRFEY.gif',

 'r': 'http://i.imgur.com/Razy8Ft.gif',

 's': 'http://i.imgur.com/IjWScaN.gif',

 't': 'http://i.imgur.com/381szHV.gif',

 'u': 'http://i.imgur.com/X32rLgK.gif',

 'v': 'http://i.imgur.com/P6L6zyN.gif',

 'w': 'http://i.imgur.com/SiG7GKW.gif',

 'x': 'http://i.imgur.com/IuiK1e7.gif',

 'y': 'http://i.imgur.com/vBjrfN3.gif',

 'z': 'http://i.imgur.com/qXeK1RF.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>