Carregando...

Como fazer o efeito de neve com JavaScript na sua página html

Postado: 21 de dezembro de 2022 Tempo de Leitura: 3 Minutos

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

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados