11/12/2012

Como Colocar o Efeito Neve Caindo no Blog

Faça uma decoração especial de Natal no seu blog, coloque um gadget com efeito de neve caindo no seu blog. Este é um código simples para adicionar no blog para fazer neve cair nas paginas do seu site. Já fizemos alguns testes e funcionou bem nos 3 principais navegadores: Internet Explorer, Firefox e Google Chrome. Veja aqui uma demonstração do efeito neve no blog.

Para fazer o efeito neve no seu blog entre na pagina layout > adicionar gadget > html/javascript e cole esse código:

<script>/** @license DHTML Snowstorm! JavaScript-based Snow for web pages
--------------------------------------------------------
Version 1.43.20111201 (Previous rev: 1.42.20111120)
Copyright (c) 2007, Scott Schiller. All rights reserved.
Code provided under the BSD License:
http://schillmania.com/projects/snowstorm/license.txt
*/
var snowStorm=function(e,d){function g(a,d){isNaN(d)&&(d=0);return Math.random()*a+d}function o(){e.setTimeout(function(){a.start(true)},20);a.events.remove(i?d:e,"mousemove",o)}function r(){if(!a.excludeMobile||!s)a.freezeOnBlur?a.events.add(i?d:e,"mousemove",o):o();a.events.remove(e,"load",r)}this.autoStart=true;this.flakesMax=128;this.flakesMaxActive=64;this.animationInterval=33;this.excludeMobile=true;this.flakeBottom=null;this.followMouse=true;this.snowColor="#fff";this.snowCharacter="&bull;";
this.snowStick=true;this.targetElement=null;this.useMeltEffect=true;this.usePositionFixed=this.useTwinkleEffect=false;this.freezeOnBlur=true;this.flakeRightOffset=this.flakeLeftOffset=0;this.flakeHeight=this.flakeWidth=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var a=this,y=this,i=navigator.userAgent.match(/msie/i),z=navigator.userAgent.match(/msie 6/i),A=navigator.appVersion.match(/windows 98/i),s=navigator.userAgent.match(/mobile|opera m(ob|in)/i),B=i&&d.compatMode==="BackCompat",t=s||B||z,h=null,
k=null,j=null,m=null,u=null,v=null,p=1,n=false,q;a:{try{d.createElement("div").style.opacity="0.5"}catch(C){q=false;break a}q=true}var w=false,x=d.createDocumentFragment();this.timers=[];this.flakes=[];this.active=this.disabled=false;this.meltFrameCount=20;this.meltFrames=[];this.events=function(){function a(b){var b=f.call(b),c=b.length;l?(b[1]="on"+b[1],c>3&&b.pop()):c===3&&b.push(false);return b}function d(a,c){var e=a.shift(),f=[b[c]];if(l)e[f](a[0],a[1]);else e[f].apply(e,a)}var l=!e.addEventListener&&
e.attachEvent,f=Array.prototype.slice,b={add:l?"attachEvent":"addEventListener",remove:l?"detachEvent":"removeEventListener"};return{add:function(){d(a(arguments),"add")},remove:function(){d(a(arguments),"remove")}}}();this.randomizeWind=function(){var c;c=g(a.vMaxX,0.2);u=parseInt(g(2),10)===1?c*-1:c;v=g(a.vMaxY,0.2);if(this.flakes)for(c=0;c<this.flakes.length;c++)this.flakes[c].active&&this.flakes[c].setVelocities()};this.scrollHandler=function(){var c;m=a.flakeBottom?0:parseInt(e.scrollY||d.documentElement.scrollTop||
d.body.scrollTop,10);isNaN(m)&&(m=0);if(!n&&!a.flakeBottom&&a.flakes)for(c=a.flakes.length;c--;)a.flakes[c].active===0&&a.flakes[c].stick()};this.resizeHandler=function(){e.innerWidth||e.innerHeight?(h=e.innerWidth-16-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:e.innerHeight):(h=(d.documentElement.clientWidth||d.body.clientWidth||d.body.scrollWidth)-(!i?8:0)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:d.documentElement.clientHeight||d.body.clientHeight||d.body.scrollHeight);k=parseInt(h/
2,10)};this.resizeHandlerAlt=function(){h=a.targetElement.offsetLeft+a.targetElement.offsetWidth-a.flakeRightOffset;j=a.flakeBottom?a.flakeBottom:a.targetElement.offsetTop+a.targetElement.offsetHeight;k=parseInt(h/2,10)};this.freeze=function(){var c;if(a.disabled)return false;else a.disabled=1;for(c=a.timers.length;c--;)clearInterval(a.timers[c])};this.resume=function(){if(a.disabled)a.disabled=0;else return false;a.timerInit()};this.toggleSnow=function(){a.flakes.length?(a.active=!a.active,a.active?
(a.show(),a.resume()):(a.stop(),a.freeze())):a.start()};this.stop=function(){var c;this.freeze();for(c=this.flakes.length;c--;)this.flakes[c].o.style.display="none";a.events.remove(e,"scroll",a.scrollHandler);a.events.remove(e,"resize",a.resizeHandler);a.freezeOnBlur&&(i?(a.events.remove(d,"focusout",a.freeze),a.events.remove(d,"focusin",a.resume)):(a.events.remove(e,"blur",a.freeze),a.events.remove(e,"focus",a.resume)))};this.show=function(){var a;for(a=this.flakes.length;a--;)this.flakes[a].o.style.display=
"block"};this.SnowFlake=function(a,e,l,f){var b=this;this.type=e;this.x=l||parseInt(g(h-20),10);this.y=!isNaN(f)?f:-g(j)-12;this.vY=this.vX=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type];this.melting=false;this.meltFrameCount=a.meltFrameCount;this.meltFrames=a.meltFrames;this.twinkleFrame=this.meltFrame=0;this.active=1;this.fontSize=10+this.type/5*10;this.o=d.createElement("div");this.o.innerHTML=a.snowCharacter;this.o.style.color=a.snowColor;this.o.style.position=n?"fixed":
"absolute";this.o.style.width=a.flakeWidth+"px";this.o.style.height=a.flakeHeight+"px";this.o.style.fontFamily="arial,verdana";this.o.style.cursor="default";this.o.style.overflow="hidden";this.o.style.fontWeight="normal";this.o.style.zIndex=a.zIndex;x.appendChild(this.o);this.refresh=function(){if(isNaN(b.x)||isNaN(b.y))return false;b.o.style.left=b.x+"px";b.o.style.top=b.y+"px"};this.stick=function(){t||a.targetElement!==d.documentElement&&a.targetElement!==d.body?b.o.style.top=j+m-a.flakeHeight+
"px":a.flakeBottom?b.o.style.top=a.flakeBottom+"px":(b.o.style.display="none",b.o.style.top="auto",b.o.style.bottom="0px",b.o.style.position="fixed",b.o.style.display="block")};this.vCheck=function(){if(b.vX>=0&&b.vX<0.2)b.vX=0.2;else if(b.vX<0&&b.vX>-0.2)b.vX=-0.2;if(b.vY>=0&&b.vY<0.2)b.vY=0.2};this.move=function(){var d=b.vX*p;b.x+=d;b.y+=b.vY*b.vAmp;if(b.x>=h||h-b.x<a.flakeWidth)b.x=0;else if(d<0&&b.x-a.flakeLeftOffset<-a.flakeWidth)b.x=h-a.flakeWidth-1;b.refresh();if(j+m-b.y<a.flakeHeight)b.active=
0,a.snowStick?b.stick():b.recycle();else{if(a.useMeltEffect&&b.active&&b.type<3&&!b.melting&&Math.random()>0.998)b.melting=true,b.melt();if(a.useTwinkleEffect)if(b.twinkleFrame)b.twinkleFrame--,b.o.style.visibility=b.twinkleFrame&&b.twinkleFrame%2===0?"hidden":"visible";else if(Math.random()>0.9)b.twinkleFrame=parseInt(Math.random()*20,10)}};this.animate=function(){b.move()};this.setVelocities=function(){b.vX=u+g(a.vMaxX*0.12,0.1);b.vY=v+g(a.vMaxY*0.12,0.1)};this.setOpacity=function(a,b){if(!q)return false;
a.style.opacity=b};this.melt=function(){!a.useMeltEffect||!b.melting?b.recycle():b.meltFrame<b.meltFrameCount?(b.setOpacity(b.o,b.meltFrames[b.meltFrame]),b.o.style.fontSize=b.fontSize-b.fontSize*(b.meltFrame/b.meltFrameCount)+"px",b.o.style.lineHeight=a.flakeHeight+2+a.flakeHeight*0.75*(b.meltFrame/b.meltFrameCount)+"px",b.meltFrame++):b.recycle()};this.recycle=function(){b.o.style.display="none";b.o.style.position=n?"fixed":"absolute";b.o.style.bottom="auto";b.setVelocities();b.vCheck();b.meltFrame=
0;b.melting=false;b.setOpacity(b.o,1);b.o.style.padding="0px";b.o.style.margin="0px";b.o.style.fontSize=b.fontSize+"px";b.o.style.lineHeight=a.flakeHeight+2+"px";b.o.style.textAlign="center";b.o.style.verticalAlign="baseline";b.x=parseInt(g(h-a.flakeWidth-20),10);b.y=parseInt(g(j)*-1,10)-a.flakeHeight;b.refresh();b.o.style.display="block";b.active=1};this.recycle();this.refresh()};this.snow=function(){for(var c=0,d=0,e=0,f=null,f=a.flakes.length;f--;)a.flakes[f].active===1?(a.flakes[f].move(),c++):
a.flakes[f].active===0?d++:e++,a.flakes[f].melting&&a.flakes[f].melt();if(c<a.flakesMaxActive&&(f=a.flakes[parseInt(g(a.flakes.length),10)],f.active===0))f.melting=true};this.mouseMove=function(c){if(!a.followMouse)return true;c=parseInt(c.clientX,10);c<k?p=-2+c/k*2:(c-=k,p=c/k*2)};this.createSnow=function(c,d){var e;for(e=0;e<c;e++)if(a.flakes[a.flakes.length]=new a.SnowFlake(a,parseInt(g(6),10)),d||e>a.flakesMaxActive)a.flakes[a.flakes.length-1].active=-1;y.targetElement.appendChild(x)};this.timerInit=
function(){a.timers=!A?[setInterval(a.snow,a.animationInterval)]:[setInterval(a.snow,a.animationInterval*3),setInterval(a.snow,a.animationInterval)]};this.init=function(){var c;for(c=0;c<a.meltFrameCount;c++)a.meltFrames.push(1-c/a.meltFrameCount);a.randomizeWind();a.createSnow(a.flakesMax);a.events.add(e,"resize",a.resizeHandler);a.events.add(e,"scroll",a.scrollHandler);a.freezeOnBlur&&(i?(a.events.add(d,"focusout",a.freeze),a.events.add(d,"focusin",a.resume)):(a.events.add(e,"blur",a.freeze),a.events.add(e,
"focus",a.resume)));a.resizeHandler();a.scrollHandler();a.followMouse&&a.events.add(i?d:e,"mousemove",a.mouseMove);a.animationInterval=Math.max(20,a.animationInterval);a.timerInit()};this.start=function(c){if(w){if(c)return true}else w=true;if(typeof a.targetElement==="string"&&(c=a.targetElement,a.targetElement=d.getElementById(c),!a.targetElement))throw Error('Snowstorm: Unable to get targetElement "'+c+'"');if(!a.targetElement)a.targetElement=!i?d.documentElement?d.documentElement:d.body:d.body;
if(a.targetElement!==d.documentElement&&a.targetElement!==d.body)a.resizeHandler=a.resizeHandlerAlt;a.resizeHandler();a.usePositionFixed=a.usePositionFixed&&!t;n=a.usePositionFixed;if(h&&j&&!a.disabled)a.init(),a.active=true};a.autoStart&&a.events.add(e,"load",r,false);return this}(window,document);</script>

Como você pode imaginar o efeito neve funciona melhor em sites que usam cores ou imagens de fundo de cor escura, mas é possível alterar a cor dos flocos neve que na verdade são pontinhos coloridos. Para fazer isso procure o trecho: this.snowColor="#fff"

E modifique as letras fff para usar cor que desejar, veja aqui o Código das Cores.

Claro que esse efeito só será útil ou agradável para alguns blogs dependendo do tipo de publico que visita seu blog, por isso avalie se os seus visitantes vão gostar de ver caindo neve no seu blog. Se você pode ver aqui outro código com efeito neve para usar no seu blog neste final de ano. Temos também outro código para enfeitar o blog são as estrelinhas caindo do ponteiro do mouse.

Papai Noel Blogueiro desejando Feliz Natal

Aproveitando esse clima de Natal e Ano Novo aproveite para repensar algumas coisas sobre seu blog, veja algumas dicas para melhorar seu site:
Como Garantir que um Blog tenha Sucesso na Internet?
O que você não gosta em um blog?
Como Fazer Avaliação de Blogs: Entender Estatísticas e Resultados

Abraços e Feliz Natal a todos os blogueiros!
Related Posts with Thumbnails

35 comentários:

  1. Esse é o pior código já inventado por um web desingner!

    É horrível entra em um site e começar cair esses flocos de neve! Apesar de ser pesado não tem porque usar isso.

    Eu prefiro dar só um estilizada no log mesmo :D

    ResponderExcluir
  2. Leo Utihaentendo seu ponto de vista, mas o que é util ou não vai depender muito para qual o publico de cada blog.

    por exemplo um gadget com placar de futebol é muito bom para um blog de esportes mas seria totalmente inútil num blog sobre artesanato.

    ResponderExcluir
  3. Vou tentar botar no blog
    Seligamanee.blogspot.com.br

    ResponderExcluir
  4. Legal!!!

    Deu certo....

    rahkellzinha@blogspot.com.br

    ResponderExcluir
  5. ai Fabiano tem como mudar a cor do blocos de neve ? por que o meu blog já branco ai nem da para ver !

    ResponderExcluir
  6. para alterar a cor é só mudar o trecho

    his.snowColor="#fff"


    o fff é a cor. Veja no tutorial um link para o código das cores

    ResponderExcluir
  7. Ai Fabiano valeu deu certo ! mais queria mudar as neve o colocar outras coisas caindo como faço ? e também aumentar o tamanho das neve que vai cair você sabe como muda esse duas coisas ?? obrigado pela sua atenção

    ResponderExcluir
  8. não tentei modificar o tamanho da neve... então não sei como fazer

    sobre outras coisas caindo na pagina no tutorial tem um link para estrelinhas caindo do mouse

    ResponderExcluir
  9. para retirar o efeito neve tem que apagar o código que colocou

    ResponderExcluir
  10. Obrigadão valeu Fabiano Roberto achei legal gostei e já esta do meu site http://www.oconciliador.net Abração.

    ResponderExcluir
  11. legal acho que meus seguidores vao gostar!

    ResponderExcluir
  12. Super legal! Deu certo! Gostei muito!!!!

    ResponderExcluir
  13. EU SOU NOVA NESSAS COISAS DE COMPUTAÇÃO...MAIS EU SEI QUE VAI SER UMA BURRICE EU PERGUNTAR ISSO,MAIS EU NECESSITO SABER...''O QUE É GADGET?''

    ResponderExcluir
  14. BOYBAND ONE DIRECTION!!! entre na pagina layout é verá os gadgets e como adicionar novo ou mudar de lugar os já existentes.


    gadgets são especies de acessórios que o blogger tem para você adicionar ao seu blog. Um deles é o html/javascript, este gadget não faz nada sozinho, mas permite você colocar naquele lugar diversos códigos html e javascripts fornecidos por outros sites no seu blog.

    ResponderExcluir
  15. muito bom mais como faço para somente cair em um lufgar ou seve somente no espaço do gadget em vez de cair no site todo ? agradecido se responder ^^

    ResponderExcluir
  16. Yan San Akichi não tem como fazer o código funcionar somente em uma parte do blog.

    ResponderExcluir
  17. Já tá no meu blog também, estou muito satisfeita obrigado
    http://pattyspinksforever.blogspot.com.br/

    ResponderExcluir
  18. Ótimo! Coloquei no meu. (Meu público é do Brasil, U.S.A. e Alemanha).
    http://equineland.blogspot.com.br/

    ResponderExcluir
  19. achei uma gracinha ....
    e ja coloquei no meu ;)
    seu blog esta me ajudando muito !!! parabens ...

    ResponderExcluir
  20. Amei os flocos, as estrelinhas, o slide rs
    Tem como aumentar a quantidade flocos??
    Parabéns!!!

    ResponderExcluir
  21. o numero de flocos é aqui
    his.flakesMax=128

    mas não aumente muito senão pode deixar sua pagina lenta

    ResponderExcluir
  22. eu não entendi como se coloca imagem na ponta do mouse assim

    ResponderExcluir
  23. Tem como colocar outra imagem caindo? Ou só os floquinhos...

    ResponderExcluir
  24. Anônimo

    com esse código só os floquinhos, mas no tutorial tem links para o efeito neve que são imagens caindo... então nele pode usar a imagem que você quiser

    ResponderExcluir
  25. Fabiano Roberto, parabéns por este tutorial! Estamos a aprender muito com seu trabalho. Boas Festas e Feliz 2014.

    ResponderExcluir
  26. João

    obrigado e feliz ano novo para você também

    ResponderExcluir
  27. Fabiano Roberto,#Valeuuuu!! só tenho à Aprender com todos esses tutoriais.
    Tudo de bom e cada vez mais sucesso com seu Blog.

    ResponderExcluir
  28. fica difícil copiar o código com esse bloqueio que vc colocou!!!!

    ResponderExcluir