Trang trí mùa Noel cho blogspot bằng một số hiệu ứng tuyết rơi

Không khí Noel đã tràn ngập trên khắp con đường, ngôi nhà,... Chúng ta cũng hưởng ứng trang trí cho "ngôi nhà" blog của chúng ta một mùa Noel 2016 sắp tới nào!

Hôm nay mình sẽ hướng dẫn và chia sẻ tới các bạn một vài hiệu ứng trang trí cho mùa noel này.

Ngoài ra còn tăng thêm phần thú vị khi đọc giả tới blog của bạn. Chỉ với vài bước cơ bản bạn đã có thể hưởng ứng phong trào Noel với một số hiệu ứng tuyết rơi, hoa tuyết...

huhu

Không để đợi lâu mình sẽ hướng dẫn luôn:

Hiệu ứng 1: Trang trí Noel tuyết rơi (cái này chỉ bằng CSS3 và HTML) sẽ không làm ảnh hưởng gì tới tốc độ blog của bạn

Cách làm bạn copy đoạn code dưới đây sau đó dán lên trên thẻ đóng </body> của blog.

<style>
.snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0;height:100%}
.snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite}
.snow.foreground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");-webkit-animation-duration:15s;animation-duration:10s}
.snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s}
.snow.middleground{background-image:url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);-webkit-animation-duration:20s;animation-duration:15s}
.snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s}
.snow.background{background-image:url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);-webkit-animation-duration:25s;animation-duration:20s}
.snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s}
@-webkit-keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}
@keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}
</style>
<div class='snow-container'>
<div class='snow foreground'></div>
<div class='snow foreground layered'></div>
<div class='snow middleground'></div>
<div class='snow middleground layered'></div>
<div class='snow background'></div>
<div class='snow background layered'></div>
</div>

Lưu lại và trở về trang chủ để xem tuyết bắt đầu rơi nào!
Hiệu ứng 2: Trang trí Noel tuyết rơi (tuyết rơi dạng này có mật độ nhỏ hơn và rơi theo khi bạn rê chuột)
Cách làm bạn copy đoạn code sau và dán lên trên thẻ đóng </body> của blog.
Hay cách khác bạn copy đoạn code và vào bố cục thêm một tiện ích HTML mới sau đó dán và lưu lại.

<script src='https://rawgit.com/startruongblog/blogspot/master/snoweffect.js'></script>

Lưu lại quay về trang chủ chờ một lúc tuyết sẽ bắt đầu rơi.
Hiệu ứng 3: Trang trí Noel bằng bông tuyết rơi
Cách làm copy code dưới đây chèn lên trên thẻ đóng </body>

<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('&#10052;'),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 một xíu, bạn nào không rành thì cứ mặc định ta dùng thôi nhé :D

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.