Chắc hẳn không ít bạn nhầm tưởng hình ảnh logo của blog Troll VL là ảnh động đúng không? Thật ra chỉ là ảnh tĩnh đuôi png thôi nhưng được thêm hiệu ứng Shiner (tráng bóng) vào nên mới sinh động như thế. Lúc đầu mình thấy hiệu ứng này bên blog Noct-land rất đẹp nên muốn áp dụng cho cái logo của blog Troll VL, và ngay sau khi tìm hiểu được và thực hiện thành công mình đã muốn chia sẻ đến các độc giả của Troll VL.
Cách thực hiện
Bước 1: Trong thẻ <head> và </head> bạn chèn đoạn cho sau<!-- load jQuery -->Bước 2: Từ giờ muốn thêm hiệu ứng Shiner vào ảnh bạn chỉ việc viết theo cấu trúc sau
<script type="text/javascript" src="https://trollvlhcv.googlecode.com/svn/trunk/fortroll/jquery-1.7.min.js"></script>
<!-- load plugin code -->
<script type="text/javascript" src="https://trollvlhcv.googlecode.com/svn/trunk/fortroll/trolllg.js"></script>
<!-- initialize the plugin -->
<script>
jQuery(document).ready(function () {
$(".peShiner").peShiner();
})
</script>
<div class="peShiner"><img data-color="fireHL" data-duration="7" src="Link hình ảnh"/></div>Trong đó fireHL là hiệu ứng màu mình sẽ ví dụ cụ thể bên dưới và data-duration="7" là tốc độ của hiệu ứng, số càng lớn thì hiệu ứng di chuyển càng chậm. Và dưới đây là một số ví dụ về hiệu ứng màu và tốc độ của hiệu ứng
Thuộc tính black
<div class="peShiner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOgQe0bPw7hh3l9A6TXSmAKnAMDXjaz_Rk2z0vDguwalP8o_FkQ68tvlzD2o6OJY8diT9OwvuDfkMSWMGiEP6gLnWIbd0akvSDGZslwE3xuO07pcajBdJ2u4pdZh0h3asXVanG6TYRvpZ/s1600/logo.png" data-color="black" />
</div>
Thuộc tính oceanHL
<div class="peShiner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOgQe0bPw7hh3l9A6TXSmAKnAMDXjaz_Rk2z0vDguwalP8o_FkQ68tvlzD2o6OJY8diT9OwvuDfkMSWMGiEP6gLnWIbd0akvSDGZslwE3xuO07pcajBdJ2u4pdZh0h3asXVanG6TYRvpZ/s1600/logo.png" data-color="oceanHL" />
</div>
Thuộc tính monoHL
<div class="peShiner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOgQe0bPw7hh3l9A6TXSmAKnAMDXjaz_Rk2z0vDguwalP8o_FkQ68tvlzD2o6OJY8diT9OwvuDfkMSWMGiEP6gLnWIbd0akvSDGZslwE3xuO07pcajBdJ2u4pdZh0h3asXVanG6TYRvpZ/s1600/logo.png" data-color="monoHL" />
</div>
Thuộc tính white
<div class="peShiner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOgQe0bPw7hh3l9A6TXSmAKnAMDXjaz_Rk2z0vDguwalP8o_FkQ68tvlzD2o6OJY8diT9OwvuDfkMSWMGiEP6gLnWIbd0akvSDGZslwE3xuO07pcajBdJ2u4pdZh0h3asXVanG6TYRvpZ/s1600/logo.png" data-color="white" />
</div>
Thuộc tính fireHL và data-duration="7"
<div class="peShiner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOgQe0bPw7hh3l9A6TXSmAKnAMDXjaz_Rk2z0vDguwalP8o_FkQ68tvlzD2o6OJY8diT9OwvuDfkMSWMGiEP6gLnWIbd0akvSDGZslwE3xuO07pcajBdJ2u4pdZh0h3asXVanG6TYRvpZ/s1600/logo.png" data-color="fireHL" data-duration="7" />
</div>
Chúc bạn thành công!
6 comments
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&Convert
'Convert
"Convert
<Convert
>