Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. JavaScript
Code

Particle.js: Introdução

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called An Introduction to Particles.js.
Particles.js: Control Particle Count and Shape

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Há um certo apelo por mini partículas movendo-se aleatoriamente, interagindo entre si ou com você. Caso haja uma situação em que é preciso lidar com muitas partículas, Particle.js é a resposta. Pelo nome, vê-se que é uma biblioteca JavaScript que ajuda a criar sistemas de partículas. Além disso, é leve, fácil de usar e dá-nos controle total.

Nesse tutorial, cobriremos todos os recursos da biblioteca e o iniciaremos nela. Esse é o primeiro artigo de uma série, cobrindo apenas o básico.

Instalação e Uso

Primeiro, precisamos hospedar a biblioteca. Podemos enviá-la para um servidor ou usar a CDN jsdeliver.

Também precisamos criar um elemento DOM onde Particle.js criará as partículas. Dê um id memorável para posterior referência.

Para criar um sistema básico e padrão de párticulas, precisamos de uma única linha JavaScript para iniciar a biblioteca.

As párticulas são brancas por padrão. Também são interconectas por finas linhas brancas. Caso não veja algo agora, mude a cor do plano de fundo. Eis o CSS que estiliza nossa div:

Clique em qualquer lugar da demo abaixo. Após cada clique, Particle.js criará quatro novas partículas.

Customizando Opções

Embora tenha tomado apenas quatro linhas de código para criar a demo anterior, o resultado final não é o que queremos. As partículas são muitas e parecem muito grandes. Talvez as partículas pudessem ter uma forma diferente ou tamanhos aleatórios. Particle.js permite configurar todas essas e outras porpriedades via JSON, referenciado durante inicialização. A sintaxe geral para invocar a função seria algo assim:

Aqui, dom-id é o id do elemento onde queremos que as partíclas apareçam. path-json é o caminho do arquivo JSON com a configuração, e callback é um função callback opcional. Ao invés de um caminho, podemos passar, diretamente, JSON como segundo parâmetro.

Criemos chuva de neve usando essa ótima biblioteca. No começo, a função parecerá com:

Removemos a função callback e alteraramos o id DOM para algo mais específico. Os flocos de neve provavelmente terão forma esférica. Cairão de cima para baixo e não terão tamanho uniforme. E, diferente da nossa primeira demo, não serão conectados por linhas.

Movendo as Partículas

No começo, nosso arquivo snowflakes.json terá o código a seguir:

Todas nossas configurações relacionas às propriedades físicas como forma, tamanho e movimento irão dentro de particles. Toda a configuração que determina comportamento de interação irá dentro de interactivity.

Criaremos 100 partículas. Mas costuma depender do espaço disponível. Como discutido antes, também configuraremos a forma circular. O arquivo deve estar mais ou menos assim:

Estamos usando 10 para o tamanho dos flocos. Como os flocos variam em tamanho, colocaremos random como true. Assim, os flocos podem variar entre zero e o limite máximo especificado. Para desabilitar ou remover todas as linhas unindo as párticulas, podemos configurar enable como false, dentro de line_linked.

Para mover as partículas, precisamos "enable": true em move. Deixando assim, as partículas movimentar-se-ão atropeladamente, como estivessem no espaço. Podemos configurar a direção das partículas com "direction": "bottom". Embora a movimentação geral seja para baixo, as partículas precisam mexer-se um pouco aleatoriamente para parecerem natural. Alcançamos isso com "straight": false. Agora, snowflake.json terá o código a seguir:

Com o código JSON acima, obteremos isso:

Mudando Comportamento Interacional

Se colocarmos o mouse na demo acima, perceberemos que as linhas ainda existem mas, apenas, nesse momento. Para removê-las completamente, podemos configurar o evento onhover desabilitando-o com "enable": false. Clique na demo acima e verá que, toda vez, quatro novas partículas são criadas. É o comportamento padrão. Podemos alterá-lo usando a propriedade particles_nb filha de push. Configurei o número para 12, nesse caso.

Também podemos determinar se detectamos os eventos na janela ou canvas usando a opção detect_on.

Eis nosso arquivo JSON completo:

Como podemos ver, não habilitamos o evento onclick. Ele é habilitado por padrão. De forma similar, poderíamos remover outras opções, como "detect_on": "canvas" em interactivity e "straight": false em move. Mantivemo-nos para iniciantes não se confundirem e perguntar o porque das partículas não caírem em linha reta.

Para tentar valores diferentes e modificar os flocos, experimente essa demo no CodePen.

Ideias Finais

Começar com Particles.js é fácil. Se já trabalhou com sistemas de partículas antes, será rápido aprender essa biblioteca. Esse tutorial foi só uma introdução. Nos próximos dois, cobriremos todos os aspectos dela e mais detalhes.

Caso haja perguntas sobre o tutorial, deixe seu comentário.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.