Home  Fórum  Sobre  Contato 

Informações

Você está vendo Adicionando o efeito de neve ao seu site. Você pode deixar um comentário ou um trackback esse post
Há 12 comentários.

December 2007
M T W T F S S
« Nov   Jan »
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Páginas

  • Contato
  • sitemap
  • Sobre

Categorias

  • ClubePC (13)
  • Desenvolvimento (37)
    • AJAX (2)
    • HTML-CSS (15)
    • Javascript (5)
    • Jquery (1)
    • MySQL (7)
    • PHP (18)
      • Aprendendo PHP (6)
    • Scripts (4)
  • Designer (42)
    • CG (12)
      • 3ds Max (6)
    • Photoshop (20)
  • Diversos (26)
  • Download (55)
  • Games (20)
  • Guia de Compra (2)
  • Hardware (7)
  • Humor (11)
  • Internet (31)
    • Blogs (3)
    • Firefox (8)
  • Notícias (33)
  • Rapidinha (6)
  • Softwares (45)
  • Windows (32)
  • Links

    • Contato
    • Download de filmes
    • Efeito Azaron
    • MeioBit
    • Site da Morróida

Site Meta

Syndicate this site using RSS 2.0The latest comments to all posts in RSS 2.0
  • Register
  • Log in
Dec-07 07

Adicionando o efeito de neve ao seu site

Enviado por: Thales RB. .     12 comentários.     Categorias: Desenvolvimento, HTML-CSS, Javascript, Scripts

Para entrar no espírito de natal é legal adicionar algo no site, mudar o layout ou criar um logo de natal, mas isso pode dar trabalho, algo bem facil de se fazer é colocar um efeito de neve caindo. Por isso vou postar um script em javascript que faz isso.

Um exemplo de como ficará pode ser visto aqui.

Ele usa uma imagem de neve então copie essa imagem aqui(ou qualquer uma a sua escolha)

neve

o link para essa imagem é http://i12.tinypic.com/6uscqjq.gif

para usa-lo é bem simples simplesmente copie todo o conteudo a seguir e cole após o <body> de seu site.

[code="javascript"][/code]

para ele funcionar é preciso alterar:

//Configure below to change URL path to the snow image
var snowsrc=”snow.gif”

para o endereço de onde se encontra a imagem, caso ela esteja na mesma pasta que a pagina pode deixar como está.

Também é possivel alterar os seguintes itens
// Configure below to change number of snow to render
var no = 10;

Irá alterar o numero de “flocos” de neve que irão aparecer


// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;

Irá alterar o tempo que o “flocos” seram exibidos na tela, 0 é infinito(ele irá até o fim da sua pagina e comecará do topo novamente)

// Configure how much snow should drop down before fading (“windowheight” or “pageheight”)
var snowdistance = “pageheight”;

Altera o tempo que os flocos iram cair, pageheight é até o fim da sua pagina(se tiver uma pagina grade isso não será bom), e windowheight é até o fim da tela(resolução do monitor).

Para manter a organizaçãse o do codigo fonte de seu site você pode salvar esse script em um arquivo .js como snow.js e em seu codigo fonte(também depois do <body>) colocar apenas

<script src=”snow.js” type=”text/javascript”></script>

alterando o src=”" para o local do arquivo no caso dele não estar na mesma pasta.

Um aviso importante: esse efeito de neve, usa bastante o processador!!!, com 5 abas dele abertas no firefox, ele estava usando 70% do meu processador(turion 64 – 2Ghz), então é melhor, colocar esse efeito, só na pagina inicial de seu site, para que ele não apareça em todas as paginas.

Se alguem quizer um outro script que não usa imagem(irá aparecer pontos) pode pedir que eu disponibilizo.

Update: olhando as origens das visitas achei no site http://www.agitonoite.com/index.php algo muito interessante, ao invez de usar a imagem de neve, colocaram um gif de fogos de artificios, ficou muito legal.

Fica ai a ideia pra quem quizer usar esse efeito agora depois do natal =D

Livros sobre JavascriptGostou desse script?, quer saber como ele funciona. Então veja o preço de alguns livros no Já cotei

 

 

 

   20,053 visualizações

Tags: CSS, Javascript, Script

Leia também

  • Mudando o layout dos formulários HTML
  • Mostrando conteudo em abas
  • Formatação de textos HTML, com editor WYSIWYG
  • Mostrar ocultar conteudos com jquery toogle
  • Diferença entre class e id no CSS

Redirecionando uma pagina »« Fixando um conteudo na tela usando CSS

666panzer666
Comment on December 7th, 2007.

Muito legal, continue assim…
parab

Aurea
Comment on December 24th, 2007.

Gostei muito desta dica! Legal!
Obrigada!
Grande abra

Thales RB
Comment on December 26th, 2007.

opa pessoal olhando as origens das visitas achei no site http://www.agitonoite.com/index.php algo muito interessante ao invez de usar a neve eles trocaram a imagem por um gif de fogos de artificios, fica ai a dica pra quem quizer usar esse efeito agora depois do natal =D

agitonoite.com
Comment on December 29th, 2007.

legal obrigado pelo comentario
usei a neve no natal e agora tou usando os fogos pro reveillon

joao
Comment on November 16th, 2008.

ol

Daniel
Comment on December 6th, 2008.

nao to conseguindo colocar nao me adiciona no msn danielferreirasousa@yahoo.com.br e me fala pq quando vou salvar aparece um codigo de erros que “&” esta no lugar errado

Casal 10 » Blog Archive » Neve!
Pingback on December 12th, 2008.

[...] o Linux Clube PC Portugal a [...]

efrain Lopes
Comment on December 18th, 2008.

Belo Trabalho!

Isa
Comment on December 11th, 2009.

Eu quero um s

Matheus
Comment on December 12th, 2009.

Ae thales eu sou formado em ciencias da computacao e gostaria d saber s isso presta mermo…

DJ BRUNO CHARPINEL
Comment on December 1st, 2010.

POWWW..IRADO MEU AMIGO MUITO OBRIGADO POR COMPARTILHAR SUAS HABILIDADES E UM POUCO DA SUA INTELIG

Léo
Comment on December 15th, 2011.

sera q vc pode me add no msn ?
leo_sivi@hotmail.com
add ai pf !
:D

Deixe um comentário

Os campos nome e e-mail são obrigatorios(o e-mail não será exibido), a URL é opcional.

Os comentários podem ter os seguintes comandos:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>







Posts mais vistos

  • Download Vray 1.5 para 3ds Max
  • Emulador Nintendo DS – No$GBA
  • Pacote de fontes Graffiti
  • Como fazer formulários em HTML/PHP
  • Detonado – Castlevania: Portrait of Ruin – NDS
  • Detonado – Castlevania Order of Ecclesia – NDS
  • Instalar o Windows XP em Hds SATA
  • Tutorial Básico PHP (Aprenda PHP)
  • Download Photoshop CS3
  • Download de modelos de carros para o 3ds Max

Comentarios recentes

  • william on Dicas – Yu-Gi-Oh! Nightmare Troubadour – NDS
  • joao victor on 300 3D Smileys para MSN
  • Tutorial Básico PHP - Riba Developer on Instalando o Apache, PHP, Mysql no Windows
  • pedro henrique on Digimon World Dawn/Dusk – DNA/Armor Digivolution
  • Eduardo on Query String

Tags

3ds Max 3ds Max Basico Aprendendo PHP Brushes ClubePC Computação Grafica CSS CSS-Hacks Designer Detonados Diversos Download Downloads Firefox Fontes Games Google Hardware HTML Básico Humor Icones Internet Internet Explorer Javascript Jogos-PC Microsoft MySQL mysql-basico NDS Notícias Office Photoshop PHP PHP Basico Portable Rapidinha Script Sobre Softwares tags-HTML Wallpapers Windows Windows-Vista Windows-XP WordPress
eXTReMe Tracker