XtGem Forum catalog

CuDemVN.Wap.Sh

- 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

Admin* 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:
<style type="text/css">
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í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>

→demo: *Hiệu ứng Text độc đáo

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.
Chúc các bạn thành công!

Nguồn: MeLyWeb.Net
↑↑ Lượt xem: 294
score
Đánh giá: 4.5/ 5, 294 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-294]