Skip to content

Instantly share code, notes, and snippets.

@douglascorrea
Last active October 27, 2016 18:23
Show Gist options
  • Save douglascorrea/a1099b2cf74a0aef8a79 to your computer and use it in GitHub Desktop.
Save douglascorrea/a1099b2cf74a0aef8a79 to your computer and use it in GitHub Desktop.
Angular Directive for Particles JS - https://github.com/VincentGarreau/particles.js
.particleJs
background-color transparent
width 35%
height 100%
display block
position absolute
top 0px
left 0px
angular.module('myApp').directive('particles', function($window) {
return {
restrict: 'A',
replace: true,
template: '<div class="particleJs" id="particleJs"></div>',
link: function(scope, element, attrs, fn) {
$window.particlesJS('particleJs', {
particles: {
color: '#52a5fd',
shape: 'circle',
opacity: 1,
size: 5.5,
size_random: true,
nb: 20,
line_linked: {
enable_auto: true,
distance: 750,
color: '#52a5fd',
opacity: 0.5,
width: 2,
condensed_mode: {
enable: false,
rotateX: 600,
rotateY: 600
}
},
anim: {
enable: true,
speed: 2.5
}
},
interactivity: {
enable: true,
mouse: {
distance: 250
},
detect_on: 'canvas',
mode: 'grab',
line_linked: {
opacity: 0.5
},
events: {
onclick: {
push_particles: {
enable: true,
nb: 4
}
}
}
},
retina_detect: true
});
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment