Question

我想将particlesJS设置为三页单滚动网页的背景。这是JSFIddle。这是particlesJS Github page。

我已经注释了将particleJS设置为第一页背景的css，因为取消注释css，使得段落在中型和大型屏幕中左对齐。

＆＃13;

$('a.page-scroll').on('click', function(event) {
  var $anchor = $(this);
  $('html, body').stop().animate({
    scrollTop: $($anchor.attr('href')).offset().top - 30
  }, 1000);
  event.preventDefault();
});

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": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "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
});

＆＃13;

* {
  margin-top: 0;
  margin-bottom: 0;
}
#page1 {
  height: 1000px;
  background-color: #000;
  color: white;
}
#page2 {
  height: 1000px;
  color: white;
  background-color: #18121e;
  padding-top: 140px;
  border-top: 100px;
}
#page3 {
  height: 650px;
  color: white;
  background-color: #233237;
  background-size: cover;
  padding-top: 200px;
}
body {
  padding-top: 0px;
}
#page1 p {
  padding-top: 100px;
  font-size: 2.5rem;
}
#page1 p #highlight {
  color: pink !important;
}
#page2 h3 {
  padding-bottom: 80px;
  line-height: 1.5;
}
#page3 h3 {
  padding-bottom: 100px;
  line-height: 1.5;
}
.btn {
  color: white;
  background-color: #000 !important;
}
.btn:hover {
  color: gray;
}
@media screen and (max-width: 990px) {
  .btn ~ .btn {
    margin-top: 10px;
  }
}
/*
#particles-js {
  height: 100%;
}

#particles-js > p {
  position: absolute;
  top: 100px;
}
*/

.text-center {
  text-align: center;
}
.box {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.thumbnail {
  height: 278px;
}
.box div.A,
.box div.B,
.box div.C,
.box div.D {
  float: left;
}
@media (max-width: 519px) {
  .box div.A,
  .box div.B,
  .box div.C,
  .box div.D {
    width: 100%;
  }
}
@media (min-width: 520px) {
  .box div.A,
  .box div.B,
  .box div.C,
  .box div.D {
    width: 50%;
  }
}
@media (min-width: 820px) {
  .box div.A,
  .box div.B,
  .box div.C,
  .box div.D {
    width: 25%;
  }
}

＆＃13;

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Rashid Naushad</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a class="page-scroll" href="#page1">About</a>
        </li>
        <li><a class="page-scroll" href="#page2">Portfolio</a>
        </li>
        <li><a class="page-scroll" href="#page3">Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
  <div id="page1">
    <div id="particles-js">
      <a id="about"></a>
      <br>
      <br>
      <br>
      <p class="text-center">Hi !
        <br>I'm a self taught web developer based in India.
        <br>I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
        <br>I dream of combining my knowledge of programming, economics, and
        <br>financial markets for the betterment of the society.
        <br>Languages and Frameworks:
        <br>HTML5, CSS3, Bootstrap3,
        <br>Javascript, jQuery, Angular.js, Meteor.js,
        <br>Node.js, React,js,
        <br>Python, php..
        <br>Tools & expertise: Git, Responsive Web Design.</p>
    </div>
  </div>

  <div id="page2">

    <a id="portfolio"></a>
    <h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
    <div class="box">

      <div class="A">
        <div class="thumbnail">
          <p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/rashidnaushad/pen/VaKMBJ/">Simple Javascript App</a> by Rashid Naushad (<a href="http://codepen.io/rashidnaushad">@rashidnaushad</a>) on <a href="http://codepen.io">CodePen</a>.</p>
          <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
        </div>
      </div>

      <div class="B">
        <div class="thumbnail">
          <p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/rashidnaushad/pen/pyPjae/">Tribute to Raghuram Rajan</a> by Rashid Naushad (<a href="http://codepen.io/rashidnaushad">@rashidnaushad</a>) on <a href="http://codepen.io">CodePen</a>.</p>
        </div>
      </div>

      <div class="C">
        <div class="thumbnail">
          <img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
          <div class="caption">
            <h5 class="text-center">Coming Soon!</h5>
          </div>
        </div>
      </div>

      <div class="D">
        <div class="thumbnail">
          <img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
          <div class="caption">
            <h5 class="text-center">Coming Soon!</h5>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div id="page3">

    <a id="contact"></a>
    <h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
    <a href="https://github.com/rashidnaushad" class="btn btn-lg col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2" target="_blank">GitHub</a>
    <div class="hidden-lg hidden-md">
      <br>
    </div>
    <a href="https://www.freecodecamp.com/rashidnaushad" class="btn btn-lg col-lg-2 col-lg-offset-1 col-md-2 col-md-offset-1 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2" target="_blank">freeCodeCamp</a>
    <div class="hidden-lg hidden-md">
      <br>
    </div>
    <a href="mailto:rashidnaushad3@gmail.com" class="btn btn-lg col-lg-2 col-lg-offset-1 col-md-2 col-md-offset-1 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2" target="_blank">Gmail</a>
  </div>

</div>

＆＃13;

Answer 1

以下是如何让div悬停在另一个地方。我使用z-index属性将文本放在画布上。

快乐编码

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": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "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
});

#content {
  position: absolute;
  z-index:999;
  color:white;
  font-size:1.5rem;
  height:100%;
}

canvas {
	display        : block;
	vertical-align : bottom;
}
#particles-js {
	position            : absolute;

	height              : 100%;
	width               : 100%;

	background-color    : black;
	background-position : 50% 50%;
	background-repeat   : no-repeat;
	background-size     : cover;
}

<!DOCTYPE html>
<html>
<head>
  <title>Text over Particles</title>
</head>
<body>

<div id="particles-js"></div>

<div id="content">
    <p style="text-align: center">
      This text hover the DisplayJS canvas.
    </p>
  </div>

    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

无法将particlesJS设置为背景

1 个答案: