Hiệu ứng Text bay nhảy tuyệt đẹp với Plugin Animation Effects

letterfx-jquery-plugin-animated-visual-text-effects_f_improf_190x152

Đôi khi bạn cần tạo một ấn tượng đối với khác truy cập vào website của bạn, những thuộc tính CSS3 với hình ảnh bay nhảy cực đẹp, hay những hiệu ứng Javascript làm cho website của bạn thật sự lôi cuốn. Ở bài viết này mình sẽ chia sẽ cho các bạn Plugin Animation Effects để làm cho những đoạn text bất kỳ trên website bay nhảy theo ý bạn, nó giống như những hiệu ứng chạy chữ trong video vậy.

Hiệu ứng Text bay nhảy tuyệt đẹp với Plugin Animation Effects

TextEffect là một plugin jQuery cực kỳ nhẹ và dễ dàng để thêm một số hình ảnh động tuyệt vời và làm đẹp văn bản của bạn, như phai văn bản, ánh sáng, mớ bòng bóng, trượt, thả xuống, ngẫu nhiên (mặc định), …

#Hướng dẫn sử dụng plugin Animation Effects

Để sử dụng plugin này, đầu tiên chúng ta cần thêm thư viện jQuery và plugin vào website:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="textEffect.jquery.js"></script>

Tạo một đoạn văn bản nho nhỏ với id=”demo1″

<p id="demo1"> Random Effects Example </p>

Gọi plugin đó cho id demo1

<script> 
jQuery(document).ready(function($) { 
$('#demo1').textEffect(); 
}); 
</script>

Tùy chọn hiệu ứng cho đoạn text

<script> 
jQuery(document).ready(function($) { 
$('#demo1').textEffect({ 
effect: 'jumble', // the type of the text aniamtion. fade, glow, jumble, slide, dropdown and random (default) 
effectSpeed: 150, // the speed in ms at which new letters begin to animate. 
completionSpeed: 6000, // the speed in ms of the text aniamtion. 
jumbleColor: '#7f7f7f' // the color of the jumbled letters. 
}); 
}); 
</script>

Bạn có thể thay đổi các tham số theo hướng dẫn ở phía sau của chúng. Bạn có thể hiểu rỏ hơn khi xem ở demo trên.

Nếu bạn có ý tưởng kết hợp plugin này với những đoạn text trên website của bạn một cách hợp lý, chắc chắn website của bạn sẽ cực kỳ ấn tượng. Chúc bạn thành công!

Hiệu ứng Text bay nhảy tuyệt đẹp với Plugin Animation Effects 5.00/5 (100.00%) 1 vote

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.