2

Использовал библиотеку канваса particles.js, все подключил, канвас идеально отображается. Вот только канвас занял всю страницу, закрыв доступ к заветным кнопкам на сайте.

  

 particlesJS("particles-js", {
    particles: {
      number: { value: 101, density: { enable: true, value_area: 850 } },
      color: { value: "#ffffff" },
      shape: {
        type: "circle",
        stroke: { width: 0, color: "#000000" },
        polygon: { nb_sides: 3 },
        image: { src: "img/github.svg", width: 100, height: 100 }
      },
      opacity: {
        value: 1,
        random: false,
        anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
      },
      size: {
        value: 1.5,
        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: false, 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: 70, duration: 0.4 },
        push: { particles_nb: 4 },
        remove: { particles_nb: 2 }
      }
    },
    retina_detect: true
  });
body {
  margin: 0;
  font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
  display: block;
  vertical-align: bottom;
} /* ---- particles.js container ---- */
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  background: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
<div id="particles-js" ></div> 

 ##В коде страницы отображается так:
<div id="particles-js">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="1349" height="424"></canvas>
</div>  ##
Откуда появился новый class="particles-js-canvas-el" и как его поставить на фон

1
  • Откуда появился новый class="particles-js-canvas-el" ? - particles.js 1506 canvas_el.className = pJS_canvas_class;
    – Alex
    22 фев 2018 в 11:41

2 ответа 2

1

Попробуйте указать валидный селектор particlesJS("#particles-js", {}), скорее всего библиотека не находит элемент и создает свой в конце страницы

Либо через css с указанием z-index

0

Если particles.js, отработал и canvas отображается, и проблема просто в стилях. То решить проблему перекрытия, наверняка, можно с помощью CSS.

Попробуйте поиграться со свойством z-index для элементов на странице. Оно как раз отвечает за порядок наложения элементов. Следует заметить что оно влияет только на элементы со свойством position установленным например в absolute, fixed или relative..

К сожалению я не вижу всей верстки. И трудно дать точный ответ. Но возможно подойдет такая конструкция: #particles-js { z-index: -1; ...}.

Что касается элемента <canvas class="particles-js-canvas-el" ...>/canvas> то этот элемент создается библиотекой particles.js, и лучше не привязывать стили или скрипты к нему, можно считать его - закрытой внутренней реализацией данной библиотеки.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.