pesquisar▼

Mostrando postagens com marcador neve. Mostrar todas as postagens
Mostrando postagens com marcador neve. Mostrar todas as postagens

Aprenda com é feito:..."neve e mais neve no blog"



fonte e créditos: 

Y más nieve en el blog


 
En entradas anteriores vimos como incluir un efecto de nieve en el blog usando varios sistemas:

->Nieve usando la etiqueta marquee.
->
Nieve usando un script externo.
->
Nieve que se va acumulando al final de la página.

En esta entrada vamos a utilizar un script que solo tendremos que copiar y pegar -desde Diseño- en un gadget HTML/Javascript.
Mucho mejor si después de añadir el gadget lo movemos al pie del blog, nos será más fácil así el localizarlo después para retirar la "  nieve".

El script utiliza una imagen "copo de nieve", pero podrá cambiarse fácilmente por una estrellita, una bolita de árbol de Navidad... cualquier icono apropiado para estas fechas.

Código:

<script language="JavaScript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){

var numberOfSnows = 20;
var snowSpeed = 0.9;
var inTheFace = 5;
var setTimeOutSpeed = 50;

var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";
for (i = 0; i < numberOfSnows; i++){
document.write('<div id="snows'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="http://3.bp.blogspot.com/_YG8aI6aU-bQ/R1oZPy7XFVI/AAAAAAAAAyE/ybhMOZzH_i4/s320/snow2.gif" class="snow" width="20"/></div>');
}
if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}
function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);
oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);
iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);
field = (h > w)?h:w;
}
function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = snowSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}
function animate(){
for (i = 0; i < numberOfSnows; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}
function init(){
win();
for (i = 0; i < numberOfSnows; i++){
strs[i] = document.getElementById("snows"+(idx+i)).style;
rst(i);
}
animate();
}
if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}//End.
</script>
<style>
.snow {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
html {
overflow-x:hidden;
}
</style>

Configuración:                                                                                                                                                                                                                   
-> var numberOfSnows = 20; Cambiamos aquí el valor para mostrar mayor o menor número de copos.
-> var snowSpeed = 0.9; Valor que controla la velocidad de desplazamiento de los copos.
-> var setTimeOutSpeed = 50; Valor que controla la velocidad de aparición de los copos.
-> En esta línea del script, podemos sustituir la url de la imagen por la que vamos a utilizar en nuestro caso y controlar su tamaño (width="20"):

<img src="http://3.bp.blogspot.com/_YG8aI6aU-bQ/R1oZPy7XFXI/AAAAAAAAAyU/k9q1UUaZIGE/s320/snow4.gif" class="snow" width="20"/>                                            

Nota:                                                                                                                                                                       
En las plantillas del Diseñador de Blogger, funciona mal o directamente no funciona.


VER EJEMPLO:Estrellas de nieve


fonte e créditos: 

Traduzido                                                                                                  

neve e mais no blog


Nos posts anteriores nós vimos como incluir o efeito de neve no blog usando vários sistemas:
->Snow usando a tag marquee.->Snow usando um script externo.->Neve que se acumula na parte inferior da página.

Neste post, vamos usar um script que simplesmente copiar e colar "a partir de
Design- Um gadget HTML / Javascript.
Muito melhor se depois de adicionar o gadget que nos movemos para o pé do blog, será mais fácil para localizar e, em seguida, para remover a "   neve".

O script usa uma imagem "  floco de neve ",   mas pode ser facilmente alterada para uma estrela, uma bola de árvore de Natal ... qualquer ícone apropriado para essas datas.

 
Código:                                                                                          

<script language="JavaScript">
if ((document.getElementById) & &
window.addEventListener | | window.attachEvent) {
(Function () {

numberOfSnows var = 20;

var snowSpeed = 0,9;
var inTheFace = 5;
var setTimeOutSpeed = 50;

var h, e, cy, cx, Sy, sx, ref, campo, oy1, oy2, OX1, OX2, iy1, iy2, ix1, ix2;

var d = documento;
domWw var = (typeof window.innerWidth == "number");
domSy var = (typeof window.pageYOffset == "number");
var PI1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var STRs = [];
gro var = [];
var dim = [];
dfc var = [];
vel var = [];
dir var = [];
var acc = [];
dtor var = [];
var XY2 = [];
var idx = document.getElementsByTagName comprimento ('div').;
zip var = [];
var pix = "px";
for (i = 0; i <numberOfSnows; i + +) {
document.write div ('<id = "neves" + (i + idx )+'"'
+ 'Style = "position: absolute; top: 0px; esquerda: 0px;"
+ "Largura: 40px; height: 40px; background-color: transparent;"
+ 'Font-size: 0px "> <img src =" http://3.bp.blogspot.com/_YG8aI6aU-bQ/R1oZPy7XFVI/AAAAAAAAAyE/ybhMOZzH_i4/s320/snow2.gif "class =" snow "width = "> 20 "/></ div ');
}
if (domWw) ref = janela;
else {
if (d.documentElement & &
== typeof d.documentElement.clientWidth "número" & &
d.documentElement.clientWidth! = 0)
ref = d.documentElement;
else {
if (d.body & &
d.body.clientWidth typeof == "number")
d.body ref =;
}
}
ganhar function () {
var mozBar = ((domWw) & &
ref.innerWidth d.documentElement.offsetWidth =) 20:00!?;
h = (domWw) ref.innerHeight:? ref.clientHeight;
w = (domWw) ref.innerWidth - mozBar:? ref.clientWidth;
c = Math.floor (h / 2);
cx = Math.floor (w / 2);
oy1 = (75 h / * 100);
oy2 = (oy1 / 2);
OX1 = (75 * w / 100);
ox2 = (OX1 / 2);
iy1 = (18 h / * 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);
campo = (h> w) h:? w;
}
rst função (s) {
CYX var;
sy = (domSy) ref.pageYOffset:? ref.scrollTop;
sx = (domSy) ref.pageXOffset:? ref.scrollLeft;
acc [s] = 0;
dim [s] = 1;
XY2 [s] = 0;
CYX = Math.round (Math.random () * 2);
if (CYX == 0) {
e [s] (cy - iy2) = + Math.floor (Math.random () * iy1);
x [s] = (cx - ix2) Math.floor + (Math.random () * ix1)
}
else {
e [s] (cy - oy2) = + Math.floor (Math.random () * oy1)
x [s] = (cx - ox2) Math.floor + (Math.random () * OX1)
}
dy y = [] s - c;
dx = x [] s - cx;
dir [s] = * Math.atan2 (dy, dx) PI1;
dfc [s] = Math.sqrt (dy * dy + dx * dx);
zip [s] = 10 * (dfc [s] + inTheFace) / 100;
vel [s] = snowSpeed * dfc [s] / 100;
dtor [s] = (campo - [s] DFC);
if (dtor [s] <1) dtor [s] = 1;
gro [s] = 0,003 dtor * [s] / 100;
}
animar function () {
for (i = 0; i <numberOfSnows; i + +) {
e [i] + = vel [i] Math.sin * (dir [i] * pi2);
x [i] + = vel [i] Math.cos * (dir [i] * pi2);
acc [i] = (vel [i] / (dfc [i] + (vel [i] zip * [i])) * vel [i]);
vel [i] + = (ACC [i]);
dim [i] + = gro [i] + acc [i] / pdf [i];
XY2 [i] = dim [i] / 2;
if (y [i] <0 + XY2 [i] | |
x [i] <0 + XY2 [i] | |
e [i] h> - XY2 [i] | |
x [i]> w - XY2 [i]) {
rst (i)
}
STRs [i] top = (y [i] - XY2 [i]) + pix + sy.;
. STRs [i] esquerda = (x [i] - XY2 [i]) + sx + pix;
STRs [i]. Width = (STRs [i]. Height = (Math.round (dim [i])) + pix)
}
setTimeout (animar, setTimeOutSpeed)
}
function init () {
vitória ();
for (i = 0; i <numberOfSnows; i + +) {
STRs [i] = document.getElementById ("neves" + (idx + i)) estilo.;
rst (i)
}
animate ();
}
if (window.addEventListener) {
window.addEventListener ("resize", vitória, false);
window.addEventListener ("carga", init, false);
}
else if (window.attachEvent) {
window.attachEvent ("onresize", ganhar);
window.attachEvent ("onload" init);
}
})();
} / / Fim.
</ Script>
<style>
. Snow {
alpha (opacity = 50);: filtro
-Moz-opacity: 0.5;
opacity: 0.5;
-KHTML-opacity: 0.5;
}
html {
overflow-x: hidden;
}
</ Style>

Configuração:

 
-> numberOfSnows var = 20; Altere o valor aqui para mostrar maior ou menor número de flocos.-> var snowSpeed = 0,9; Um valor que controla a velocidade de circulação dos flocos.-> var setTimeOutSpeed = 50; Valor que controla a taxa de aparecimento dos flocos.-> Nessa linha de script, podemos substituir a url da imagem que vamos usar no nosso caso e controlar o tamanho(width = "   20"   ) :   


<img src="http://3.bp.blogspot.com/_YG8aI6aU-bQ/R1oZPy7XFXI/AAAAAAAAAyU/k9q1UUaZIGE/s320/snow4.gif" class="snow" width="20"/>

Nota:                                                                                                    

Nos modelos Designer Blogger, avaria ou nenhum trabalho.




Share/Bookmark
http://divulgador1.blogspot.com

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

seguir por email:

Adicione sua URL no Google, e apareça nas buscas

Pesquisar

arquivo