2016-01-24 16 views
0

我想讓粒子JS作爲背景工作。正如你可以在my website上看到的,body的屬性爲particles但是,粒子只在內容之後。它不遵循順序。這裏是配置:粒子不遵循HTML命令

particlesJS("particles-js", { 
    particles: { 
     number: { 
      value: 80, 
      density: { 
       enable: !0, 
       value_area: 800 
      } 
     }, 
     color: { 
      value: "#ffffff" 
     }, 
     shape: { 
      type: "circle", 
      stroke: { 
       width: 0, 
       color: "#000000" 
      }, 
      polygon: { 
       nb_sides: 5 
      }, 
      image: { 
       src: "img/github.svg", 
       width: 100, 
       height: 100 
      } 
     }, 
     opacity: { 
      value: .5, 
      random: !1, 
      anim: { 
       enable: !1, 
       speed: 1, 
       opacity_min: .1, 
       sync: !1 
      } 
     }, 
     size: { 
      value: 3, 
      random: !0, 
      anim: { 
       enable: !1, 
       speed: 40, 
       size_min: .1, 
       sync: !1 
      } 
     }, 
     line_linked: { 
      enable: !0, 
      distance: 150, 
      color: "#ffffff", 
      opacity: .4, 
      width: 1 
     }, 
     move: { 
      enable: !0, 
      speed: 6, 
      direction: "none", 
      random: !1, 
      straight: !1, 
      out_mode: "out", 
      bounce: !1, 
      attract: { 
       enable: !1, 
       rotateX: 600, 
       rotateY: 1200 
      } 
     } 
    }, 
    interactivity: { 
     detect_on: "canvas", 
     events: { 
      onhover: { 
       enable: !0, 
       mode: "grab" 
      }, 
      onclick: { 
       enable: !0, 
       mode: "push" 
      }, 
      resize: !0 
     }, 
     modes: { 
      grab: { 
       distance: 140, 
       line_linked: { 
        opacity: 1 
       } 
      }, 
      bubble: { 
       distance: 400, 
       size: 40, 
       duration: 2, 
       opacity: 8, 
       speed: 3 
      }, 
      repulse: { 
       distance: 200, 
       duration: .4 
      }, 
      push: { 
       particles_nb: 4 
      }, 
      remove: { 
       particles_nb: 2 
      } 
     } 
    }, 
    retina_detect: !0 
}); 

謝謝!

+1

您還沒有給出畫布任何風格,所以它只是被添加到您的文件,因此在底部出現。嘗試添加'位置:絕對; top:0;左:0;'到畫布。 –

+0

@NiettheDarkAbsol我已經將這些規則添加到'canvas'中,使它無法工作。 –

回答

0

嘗試用:

#particles-js { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

#particles-js > canvas { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
}