jQuery tạo hiệu ứng chữ tự động nhảy ra như đang nhập liệu

jQuery
ihoan đã viết 11 tháng trước

Code jQuery tạo hiệu ứng chữ tự động nhảy ra như đang nhập liệu

<div class="show">
<div class="text">Chào mừng bạn đến vơi Cáo Đêm, chúc bạn một ngày tốt lành :)</div>
</div>

Cấu trúc HTML gồm hai thẻ div bao bọc bên ngoài nội dung

<script>
function autoType(elementClass, typingSpeed){
var thhis = $(elementClass);
thhis.css({
"position": "relative",
"display": "inline-block"
});
thhis.prepend('<div class="cursor" style="right: initial; left:0;"></div>');
thhis = thhis.find(".text");
var text = thhis.text().trim().split('');
var amntOfChars = text.length;
var newString = "";
thhis.text("|");
setTimeout(function(){
thhis.css("opacity",1);
thhis.prev().removeAttr("style");
thhis.text("");
for(var i = 0; i < amntOfChars; i++){
(function(i,char){
setTimeout(function() { 
newString += char;
thhis.text(newString);
},i*typingSpeed);
})(i+1,text[i]);
}
},1500);
}
$(document).ready(function(){ 
autoType(".show", 90);
});
</script>

Code jQuery tạo hiệu ứng như đang nhập liệu

 

894
Bài viết cùng chủ đề

Code jQuery thu gọn, mở rộng đoạn text

Hiệu ứng Animated Number Counter bằng jQuery

Tải về nội dung trong textarea bằng jQuery

Tự động cập nhật nội dung cho div khi nhập văn bản vào textarea

Bộ lọc select chọn Tỉnh Thành, Quận huyện, Xã phường