Использование частиц.js

Question

Использование частиц.js

В качестве фона я использую частиц.js, но частицы охватывают только размер окна и исчезают при прокрутке вниз. В попытке противостоять этому я добавил position: fixed; к его селектору CSS. Несмотря на то, что частицы полностью покрыли страницу, все гиперссылки на веб-странице были деактивированы. Почему это происходит? Любое решение?

Изменить: Github репо для частиц.js https://github.com/VincentGarreau/particles.js/

<div id="particles-js"></div>
<script src="particles.js"></script>
<script src="site/js/app.js"></script>

Реализация CSS:

#particles-js{
width: 100%;
height: 100%;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}

Для файла JS, пожалуйста, обратитесь к вышеуказанному хранилищу. Это на самом деле app.js а также particles.js которые делают основную работу в плагине.

0

html css particles.js

Источник

user8245417 03 авг '17 в 14:11

1 ответ

Другие вопросы по тегам html css particles.js

user6739479 04 авг '17 в 02:23 2017-08-04 02:23 · Answer 1 · 2017-08-04 02:23

У меня была та же проблема, и я решил ее следующим образом:

CSS

#particles-js{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #000;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.body-particles{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

HTML

<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- SOME CSSs HERE -->

        <link rel="stylesheet" media="screen" href="assets/css/particles.css">

         <!-- SOME SCRIPTS HERE -->
    </head>
    <body>
        <div class="body-particles">

        <!-- Wrapper -->
            <div id="wrapper">
                <!-- MY STUFF HERE, STYLED WITH MY CSS -->
            </div>
        </div>

        <!-- particles.js container -->
        <div id="particles-js"></div>

        <!-- scripts -->
        <script src="assets/js/particles.js"></script>
        <script src="assets/js/app.js"></script>

    </body>
</html>

Чтобы заставить работать гиперссылки (наряду с событиями касания частицы.js), я добавил класс mouseEvents к элементам, на которые нужно сфокусироваться (например, гиперссылки, панель навигации и т. Д.)

CSS

.body-particles{
  pointer-events: none;
}


.mouseEvents{
  pointer-events: all;
}