Creación de un sistema de partículas animadas mediante particles. js

Vista prévia

Descripción

Particles. js es una biblioteca independiente de JavaScript que le ayuda a crear un sistema de partículas animado & interactivo que reacciona al cursor del espectador. Basado en HTML5 Canvas Element.

Funcionamiento

Cree un contenedor vacío donde desee generar un sistema de partículas.

<div id="particles-js"></div>

Cargue el script PARTICLES. js al final del documento para que la página se cargue más rápido.

<script src="particles.js"></script>

Active el sistema de partículas y config particles. js ' params.

particlesJS('particles-js', {

canvas: {


color_hex_bg: '#15414e',


opacity: 1

},

particles: {


color_hex: '#fff',


opacity: 1,


size: 2.5,


size_random: true,


nb: 200,


anim: {



speed: 2


}

},

retina_detect: true
});

Todos los params predeterminados.

particles: {

color: '#fff',

shape: 'circle',

opacity: 1,

size: 2.5,

size_random: true,

nb: 200,

line_linked: {


enable_auto: true,


distance: 100,


color: '#fff',


opacity: 1,


width: 1,


condensed_mode: {



enable: true,



rotateX: 65000,



rotateY: 65000


}

},

anim: {


enable: true,


speed: 1

},

array: []

},

interactivity: {


enable: true,


mouse: {



distance: 100


},


detect_on: 'canvas',


mode: 'grab'

},

retina_detect: false,

fn: {


vendors:{



interactivity: {}


}
}

Registro de cambios

05/10/2015

• actualizar