[TUTORIAL] Neve cair sobre o fórum

[Fry]

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Efeitos natalinos

Sempre que se chega a época do Natal, muitas pessoas gostam de enfeitar suas casas com objetos e decorações. Nos fóruns, também é possível fazer isso, e com a mistura correta de vários códigos, é possível criar um belo tema natalino.

--> Tutoriais e astúcias <--
Neve cair sobre o fórum

1º - Código que deverá ser utilizado para criar o efeito de neve caindo:
Este código é bem personalizável, basta que você edite as partes coloridas, existe uma indicação ao final deste ponto explicando o que faz cada uma delas.

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
******************************************/

//Localização da imagem do floco de neve
var snowsrc="Endereço_da_imagem"
// Quantidade de flocos de neve na tela
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

Vermelho -> Endereço da imagem do floco de neve ou outra qye deseja colocar, como anjos ou bolas de natal. Teremos exemplos de imagens na FAQ deste tutorial, basta descer e dar uma olhadela!
verde -> Número de imagens que caem sobre a tela ao mesmo tempo. Por padrão fica definido 10, mas pode ser modificado conforme o adminsitrador queira!
Laranja -> Após quanto tempo estas imagens irão desaparecer. Ao definir zero elas irão desaparecer somente ao chegar a uma certa altura da página.



2º - Criar uma página HTML para sustentar o código:
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Título - Pode colocar o título que quiser para a página, não irá afetar em nada.

Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.

Usar esta página como página inicial? - esta também deverá estar marcada como não, apesar de que não influencia em nada o código.

Código HTML - Coloque aqui o código que trabalhamos no item anterior.

Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.

(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não elterou a ordem de exibição).

(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

3º - Inserir o código para que funcione em todas as páginas do fórum:
Devemos colocá-lo em um campo que seja mostrado em todas as páginas, como somente há um campo que se encaixe neste requisito, a descrição do seu fórum será comprometida com este código. Pode manter ambos em funcionamento, para isso basta separar o código da descrição.

Para adicionar o código aceda a:
Painel de Controle -> Geral -> Fórum -> Configurações

Ele deverá ser adicionado ao campo "Descrição do site". Caso encontre códigos nesta área, deverá colá-lo primeiro, antes de tudo mais que possa existir neste campo.

(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

O código será:

<script src="ENDERECO-DA-PAGINA-HTML"></script>

Por exemplo, no FdF:

<script src="http://ajuda.forumeiros.com/h1-natal"></script>

--> FAQ do Tutorial <--
Neve cair sobre o fórum

• Quais imagens de neve posso usar?
  Pode usar a que desejar, mas deixamos aqui algumas de exemplo:
  

  	Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
  	Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

• Não gostei deste efeito, existem outros?!
  Claro que sim! Para estes que irei citar, deverá fazer como fez no ponto três, mas com os códigos que serão dados. Ao lado poderá ver um exemplo de cada um.

  [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]	Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] <script src="http://astuforum.free.fr/js/neige.js"></script>
  [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]	Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] <script src="http://astuforum.free.fr/js/neige_lettre.js"></script>
  [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]	Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] <script src="http://astuforum.free.fr/js/neige-mini.js"></script>
  [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]	Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] <script src="http://astuforum.free.fr/js/snow.js"></script>
  [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]	Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] <script src="http://s1.wordpress.com/wp-content/plugins/snow/snowstorm.js"></script>

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Neve cair sobre o fórum