Cum adaugi efectul fulgi de nea pe website blogger

De către

decembrie 17, 2015

Odata cu venirea sarbatorilor de iarna, astazi m-am gandit sa va pregatesc un tutorial video cu efectul fulgi de nea , mai exact este vorba despre un cod javascript pe care o sa il adaugam pe site , iar acesta va genera o animatie asemanatoare ninsorii..Codul functioneaza pe site-urile ce apartin de blogger(blogspot)..

<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);//]]></script><script>$(document).ready( function(){
$.fn.snow({ minSize: 10, maxSize: 30, newOn: 400, flakeColor: '#26C4EC' });
});</script>

Legenda :

Schimba in cod numai ce este cu rosu mai jos aveti o legenda :

1. minSize: 10 – reprezinta dimensiunea cea mai mica a fulgilor de nea
2. maxSize: 30 – reprezinta dimensiune cea mai mare a fulgilor de nea
3. newOn: 400 – un numar mai mic ca 400 inseamna mai multi fulgi , un numar mai mare ca 400 inseamna mai putini fulgi..
4.flakeColor: ‘#26C4EC’– codul cu rosu reprezinta culoarea fulgilor.

Tutorial Video Cum adaugi efectul fulgi de nea pe website blogger