워드프레스에서 파티클을 배경으로 넣고 싶을 때

https://codepen.io/Saramazal/pen/ZEejVxj

particles.js demo

 

나의 경우 일부 호스팅에서는 문제 없이 동작하였으나, 
까페24의 매니지드 워드프레스 호스팅에서는 위험한 주소로 인식하여 차단이 되었다. 
그래서 그냥 파일을 다운받아 ftp로 올려 사용하였다. 

particles.min.js

0.02MB

particle.js

0.00MB

 

function.php에서 해당 파일들을 불러와 사용한다.
(파일 불러오는 순서는 아래와 같다)

/* 파티클 */

function seven_script_enqueue(){
wp_enqueue_script( 'particle2-script', get_stylesheet_directory_uri() . '/assets/js/particles.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'particle-script', get_stylesheet_directory_uri() . '/assets/js/particle.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'seven_script_enqueue' );

 

(function ($) {
  $(document).ready(function () {

    particlesJS("particles-js", {
      particles: {
        number: { value: 80, density: { enable: true, 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: 0.5,
          random: false,
          anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
        },
        size: {
          value: 3,
          random: true,
          anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
        },
        line_linked: {
          enable: true,
          distance: 150,
          color: "#ffffff",
          opacity: 0.4,
          width: 1
        },
        move: {
          enable: true,
          speed: 6,
          direction: "none",
          random: false,
          straight: false,
          out_mode: "out",
          bounce: false,
          attract: { enable: false, rotateX: 600, rotateY: 1200 }
        }
      },
      interactivity: {
        detect_on: "canvas",
        events: {
          onhover: { enable: true, mode: "repulse" },
          onclick: { enable: true, mode: "push" },
          resize: true
        },
        modes: {
          grab: { distance: 400, line_linked: { opacity: 1 } },
          bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
          repulse: { distance: 200, duration: 0.4 },
          push: { particles_nb: 4 },
          remove: { particles_nb: 2 }
        }
      },
      retina_detect: true
    });