app.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /* -----------------------------------------------
  2. /* How to use? : Check the GitHub README
  3. /* ----------------------------------------------- */
  4. /* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
  5. /*
  6. particlesJS.load('particles-js', 'particles.json', function() {
  7. console.log('particles.js loaded - callback');
  8. });
  9. */
  10. /* Otherwise just put the config content (json): */
  11. particlesJS('particles-js',
  12. {
  13. "particles": {
  14. "number": {
  15. "value": 40,
  16. "density": {
  17. "enable": true,
  18. "value_area": 800
  19. }
  20. },
  21. "color": {
  22. "value": "#ffffff"
  23. },
  24. "shape": {
  25. "type": "circle",
  26. "stroke": {
  27. "width": 0,
  28. "color": "#000000"
  29. },
  30. "polygon": {
  31. "nb_sides": 5
  32. },
  33. "image": {
  34. "src": "img/github.svg",
  35. "width": 100,
  36. "height": 100
  37. }
  38. },
  39. "opacity": {
  40. "value": 0.7,
  41. "random": false,
  42. "anim": {
  43. "enable": false,
  44. "speed": 1,
  45. "opacity_min": 0.1,
  46. "sync": false
  47. }
  48. },
  49. "size": {
  50. "value": 3,
  51. "random": true,
  52. "anim": {
  53. "enable": false,
  54. "speed": 40,
  55. "size_min": 0.1,
  56. "sync": false
  57. }
  58. },
  59. "line_linked": {
  60. "enable": true,
  61. "distance": 150,
  62. "color": "#ffffff",
  63. "opacity": 0.6,
  64. "width": 1
  65. },
  66. "move": {
  67. "enable": true,
  68. "speed": 6,
  69. "direction": "none",
  70. "random": false,
  71. "straight": false,
  72. "out_mode": "out",
  73. "bounce": false,
  74. "attract": {
  75. "enable": false,
  76. "rotateX": 600,
  77. "rotateY": 1200
  78. }
  79. }
  80. },
  81. "interactivity": {
  82. "detect_on": "canvas",
  83. "events": {
  84. "onhover": {
  85. "enable": true,
  86. "mode": "grab"
  87. },
  88. "onclick": {
  89. "enable": true,
  90. "mode": "push"
  91. },
  92. "resize": true
  93. },
  94. "modes": {
  95. "grab": {
  96. "distance": 200,
  97. "line_linked": {
  98. "opacity": 1
  99. }
  100. },
  101. "bubble": {
  102. "distance": 400,
  103. "size": 40,
  104. "duration": 2,
  105. "opacity": 8,
  106. "speed": 3
  107. },
  108. "repulse": {
  109. "distance": 200,
  110. "duration": 0.4
  111. },
  112. "push": {
  113. "particles_nb": 4
  114. },
  115. "remove": {
  116. "particles_nb": 2
  117. }
  118. }
  119. },
  120. "retina_detect": false
  121. }
  122. );