7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. JavaScript

Particle.js: Introdução

Read Time: 4 mins
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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.