Để chào đón Noel, Tú Ú Chia Sẻ sẽ hướng dẫn các bạn cách tạo hiệu ứng bông tuyết rơi cho blogspot của bạn.
Hiệu ứng tuyết rơi được tạo ra nhờ Jquery, do vậy các bông tuyết rơi rất mượt mà, đẹp măt,bạn có thể thay đổi tốc độ rơi và kích thước của bông tuyết. Sau đây chúng ta cùng bắt tay vào thực hiện.
THÊM HIỆU ỨNG TUYẾT RƠI CHO BLOGSPOT
1. Đăng nhập vào bảng điều khiển Blog của bạn.
2. Bấm chọn Mẫu (template) => Chỉnh sử HTML
3. Thêm đoạn mã bên dưới vào sau thẻ mở <head> trong blogspot của bạn.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/> <script type='text/javascript'> //<![CDATA[ (function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('❄'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery); $(document).ready( function(){ $.fn.snow({ minSize: 10, maxSize: 50, newOn: 400, flakeColor: '#ffffff' }); }); //]]> </script>
Tuỳ chỉnh code:
Nếu trong Blog của bạn đã có thư viện JQuery rồi thì hãy xoá bỏ đoạn mã màu xanh đi nhé.
minSize: 10, - Thiết lập kích thước tối thiểu của bông tuyết, bằng cách thay đổi kích thước tối thiểu và kích thước tối đa bạn có thể tạo ra nhiều bông tuyết khác nhau cho phù hợp với blog của bạn.
maxsize: 50, Thiết lập kích thước tối đa của bông tuyết.
newOn: 400, Thiết lập tần số rơi của các bông tuyết đơn vị tính là mili giây (1000 mili giây = 1 giây), số này càng tớn thì tần số bông tuyết xuất hiện càng ít, và ngược lại nếu số này càng nhỏ thì tần số rơi của bông tuyết sẽ càng tăng lên.
flakeColor: '#ffffff' là màu của các bông tuyết, hãy thay đổi mã màu #ffffff cho phù hợp với blog của bạn nhé, bạn nên chọn màu tương phản với màu nền blog của bạn, ví dụ: nếu blog bạn màu nền là màu trắng thì nên chọn bông tuyết màu đỏ hoặc màu xanh. Nếu không biết chọn mã màu nào bạn có thể xem Bảng mã màu
4.Bấm Lưu mẫu của bạn lại và xem kết quả nhé.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.