Tutorial Partículas.js – Criar efeito de partículas com JavaScript

Neste tutorial, vou falar sobre as partículas.Js. Uma biblioteca JavaScript que permite criar um efeito de partícula dinâmica no seu site. Você pode personalizar o tamanho, velocidade, comportamento de movimento e muito mais com partículas.js. Aqui está a página de demonstração de partículas que permite que você tente várias configurações e veja como isso realmente funciona.

Preparar o ambiente de trabalho

Depois de ter jogado com a demonstração, é hora de implementação. Vamos começar a baixar a versão mais recente do GitHub e importá-lo para sua página HTML usando a tag de script.

Em seguida, crie um arquivo JSON da configuração. É aqui que você pode personalizar a opção de. Vou usar a configuração básica fornecida no github, que deve ser uma boa partícula de início, como tamanho, densidade, movimento, cor, etc.

Também alterarei a cor um pouco desde que a parte inferior da página é branca.

{ "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#fdefaa" },

Em seguida, crie um elemento div Quer usar como uma explosão de partículas com a largura e altura apropriadas. Também vou criar um botão para iniciar o efeito de partícula quando você clicar.

<div></div><button>Start</button>#particle-div { margin: 0 auto; width:800px; height:500px;}

no evento clique, podemos iniciar o método de carregamento modules.js e fornecer O ID do elemento de contêiner que acabamos de criar, seguido pelo nome do arquivo de configuração JSON.

$("#particle-button").click(function(){ particlesJS.load('particle-div','particle-cfg.json'); });

e é isso, está pronto para ir. Vamos ver como funciona!

Alterar a opção Dinamicamente

também pode fazer uma alteração no opção de partículas na mosca. Vamos criar um botão de atualização.

<button>Update</button>

dentro do driver de evento clique, podemos nos referir à matriz de objeto Modules.js e fazer alterações na configuração como isso. Você pode ver a lista completa dessas configurações no github. Quando você terminar com as atualizações, ligue para o método de atualização de partículas para coletar a alteração.

$("#update-button").click(function(){ window.pJSDom.pJS.particles.number.value = 200; window.pJSDom.pJS.particles.color.value = "#dccaff"; window.pJSDom.pJS.tmp.obj.size_value = 80; window.pJSDom.pJS.fn.particlesRefresh(); });

e aqui é quando você clica no botão Atualizar.

Você pode vê-los em ação no seguinte vídeo:

código fonte

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script src="jquery-2.1.4.js"></script> <script src="particles.js"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div><span>Particles.js</span></div> <div> <div></div> <button>Start</button> <button>Update</button> </div> <script> $("#particle-button").click(function(){ particlesJS.load('particle-div','particle-cfg.json'); }); $("#update-button").click(function(){ window.pJSDom.pJS.particles.number.value = 200; window.pJSDom.pJS.particles.color.value = "#dccaff"; window.pJSDom.pJS.tmp.obj.size_value = 80; window.pJSDom.pJS.fn.particlesRefresh(); }); </script> </body></html>#particle-div { margin: 0 auto; width:800px; height:500px;}
0/5 (0 comentários)

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *