app.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  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. /** **/
  11. /* Otherwise just put the config content (json): */
  12. particlesJS('particles-js',
  13. {
  14. "particles": {
  15. "number": {
  16. "value": 10,
  17. "density": {
  18. "enable": true,
  19. "value_area": 1200
  20. }
  21. },
  22. "color": {
  23. "value": "#ffffff"
  24. },
  25. "shape": {
  26. "type": "circle",
  27. "stroke": {
  28. "width": 2,
  29. "color": "#000000"
  30. },
  31. "polygon": {
  32. "nb_sides": 5
  33. },
  34. "image": {
  35. "src": "img/github.svg",
  36. "width": 100,
  37. "height": 100
  38. }
  39. },
  40. "opacity": {
  41. "value": .8,
  42. "random": false,
  43. "anim": {
  44. "enable": false,
  45. "speed": 1,
  46. "opacity_min": 0.1,
  47. "sync": false
  48. }
  49. },
  50. "size": {
  51. "value": 5,
  52. "random": true,
  53. "anim": {
  54. "enable": false,
  55. "speed": 40,
  56. "size_min": 0.1,
  57. "sync": false
  58. }
  59. },
  60. "line_linked": {
  61. "enable": true,
  62. "distance": 150,
  63. "color": "#ffffff",
  64. "opacity": 0.4,
  65. "width": 1
  66. },
  67. "move": {
  68. "enable": true,
  69. "speed": 6,
  70. "direction": "none",
  71. "random": false,
  72. "straight": false,
  73. "out_mode": "out",
  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": "repulse"
  87. },
  88. "onclick": {
  89. "enable": true,
  90. "mode": "push"
  91. },
  92. "resize": true
  93. },
  94. "modes": {
  95. "grab": {
  96. "distance": 400,
  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. },
  111. "push": {
  112. "particles_nb": 4
  113. },
  114. "remove": {
  115. "particles_nb": 2
  116. }
  117. }
  118. },
  119. "retina_detect": true,
  120. "config_demo": {
  121. "hide_card": false,
  122. "background_color": "#b61924",
  123. "background_image": "",
  124. "background_position": "50% 50%",
  125. "background_repeat": "no-repeat",
  126. "background_size": "cover"
  127. }
  128. }
  129. );