- Página Inicial
- Jquery
- Como fazer o efeito de neve com JavaScript na sua página html
- Voltar
Como fazer o efeito de neve com JavaScript na sua pagina html.
Snowstorm é um efeito de neve baseado em JavaScript que pode ser facilmente adicionado a páginas da web. É gratuito para uso e fácil de configurar. Um único arquivo JavaScript fornece a funcionalidade necessária. Nenhuma imagem é usada para o efeito de neve.
Como você pode botar esta efeito no seu site ?
Isso é tudo que você precisa para começar:
<script src="snowstorm.js"></script>
Além disse você pode personalizar?
Você pode ajustar a velocidade da neve, a quantidade de neve, o “vento”, se e onde deve grudar (e se deve “derreter”) e, finalmente, se a neve pode reagir ao movimento do mouse (por exemplo, ” mudanças de vento.”) Consulte Personalizando a tempestade de neve para saber mais.
Download
ZIP, inclui esta página de demonstração e código-fonte.
Também no Github: github.com/scottschiller/snowstorm/
Personalizando o efeito neve!
Assim que o Snowstorm estiver em execução em sua página, você poderá personalizar suas propriedades editando o arquivo snowstorm.js diretamente ou atribuindo novos valores ao objeto snowstorm após o carregamento do snowstorm.js.
Por exemplo:
<!-- Necessário JS de tempestade de neve, comportamento padrão --> <script src="snowstorm.js"></script> <!-- agora, personalizaremos o objeto snowStorm --> <script> snowStorm.snowColor = '#99ccff'; // neve azul!? snowStorm.flakesMaxActive = 96; // mostra mais neve na tela de uma vez snowStorm.useTwinkleEffect = true; // deixa a neve piscar dentro e fora de vista </script>
Veja este exemplo personalizado em ação.
Propriedades e mais configurações
A tempestade de neve pode ser facilmente personalizada; algumas das principais propriedades estão listadas abaixo.
snowStorm.autoStart = true;
Se a neve deve começar automaticamente ou não.
snowStorm.animationInterval = 33;
Medição teórica de “milissegundos por quadro”. 20 = rápido + suave, mas alto uso da CPU. 50 = mais conservador, mas mais lento.
snowStorm.flakeBottom = null;
Limita o “piso” (pixels) da neve. Se não for especificado, a neve “grudará” na parte inferior da janela do navegador e persistirá durante o redimensionamento/rolagem do navegador.
snowStorm.flakesMax = 128;
Define o número máximo de flocos de neve que podem existir na tela a qualquer momento.
snowStorm.flakesMaxActive = 64;
Define o limite de flocos de neve “caindo” (ou seja, movendo-se na tela, portanto, considerados ativos).
snowStorm.followMouse = true;
Permite que a neve se mova dinamicamente com o “vento”, em relação às coordenadas X (esquerda/direita) do mouse.
snowStorm.freezeOnBlur = true;
Interrompe o efeito de neve quando a janela do navegador fica fora de foco, por exemplo, o usuário está em outra guia. Economiza CPU, mais agradável para o usuário.
snowStorm.snowColor = '#fff';
Não coma (ou use?) neve amarela.
snowStorm.snowCharacter = '•';
&touro; (•) = bala. &midot; a entidade (·) não é usada porque é quadrada em alguns sistemas, etc. Alterar isso pode resultar no corte do caractere e pode exigir alterações flakeWidth/flakeHeight, portanto, tenha cuidado.
snowStorm.snowStick = true;
Permite que a neve “grude” na parte inferior da janela. Quando desligado, a neve nunca ficará no fundo.
snowStorm.targetElement = null;
Um elemento HTML ao qual será anexado (padrão: corpo do documento). Pode ser uma string de ID de elemento, por exemplo. ‘myDiv’ ou uma referência de nó DOM. Veja exemplos de posições relativas e absolutas .
snowStorm.useMeltEffect = true;
Ao reciclar a neve caída (ou raramente, ao cair), faça-a “derreter” e desaparecer se o navegador for compatível
snowStorm.useTwinkleEffect = true;
Permita que a neve “pisque” aleatoriamente dentro e fora de vista enquanto cai
snowStorm.usePositionFixed = false;
true = neve não afetada pela rolagem da janela. pode aumentar a carga da CPU, desabilitada por padrão – se habilitada, usada apenas quando suportada.
snowStorm.vMaxX = 8; snowStorm.vMaxY = 5;
Define as velocidades máximas X e Y para a tempestade; um valor aleatório neste intervalo é selecionado para cada floco de neve.
Métodos
Snowstorm tem alguns métodos básicos para controlar o efeito de neve.
snowStorm.randomizeWind()
Define a velocidade do vento com um valor aleatório relativo às propriedades vMaxX e vMaxY.
snowStorm.freeze()
Pára o efeito de neve no local.
snowStorm.resume()
Continua nevando de um estado “congelado”.
snowStorm.toggleSnow()
Ativa ou desativa o efeito de neve dependendo do estado, o mesmo que chamar freeze() ou resume().
snowStorm.stop()
Congela e elimina o efeito de tempestade de neve e remove os manipuladores de eventos relacionados. Snowstorm não funcionará corretamente se outros métodos forem chamados após stop().
Veja mais detalhes no site deles
Publicado por: Loop Nerd
1.802 Visualizações
Deixe um comentário