时间戳

首页 > 解决方案 > 如何让particle.js 只移动一个特定的div？

javascript - 如何让particle.js 只移动一个特定的div？

问题描述

这是我的完整代码。事实上，我有一些问题。正如您在输出中看到的，粒子在整个页面上移动，但我希望粒子仅在红色 div 上移动。我怎样才能做到这一点？其次，您会看到粒子开始在导航栏和段落下方移动，但我实际上希望粒子从页面顶部开始。我怎样才能做到这一点？输出示例. 而且我也无法在红色 div 的中心做标题和段落。谁能帮我？

particlesJS('particles-js',
  
  {
    "particles": {
      "number": {
        "value": 80,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": ["#f1c40f","#3498db","#9b59b6","#e74c3c","#2ecc71"]
      },
      "shape": {
        "type": ["circle","star","polygon","triangle"] ,
        "stroke": {
          "width": 0,
          "color": "#000000"
        },
        "polygon": {
          "nb_sides": 5
        },
        "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": 5,
        "random": false,
        "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",
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": false,
          "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
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true,
    "config_demo": {
      "hide_card": false,
      "background_color": "#b61924",
      "background_image": "",
      "background_position": "50% 50%",
      "background_repeat": "no-repeat",
      "background_size": "cover"
    }
  }

);
body
{ 
margin:0;
padding:0;

}
div#particles-js
{ 
width:100%;
height:500px;
background:red;
position: fixed;
text-align:center;
}

h1 h2
{
	margin:  300px 300px;
	text-align:center;
}
#r{
	height:800px;
	background-color:yellow;
}
.navbar {
  height: 80px;
  background-color: transparent;
  border: none;
  color: white;
  z-index: 100;
  transition: background-color 1s ease 0s;
  font-size:15px;
}


.navbar-default .navbar-brand {
     margin-top: 10px;
     color: white;
   } 
    .navbar-default .navbar-brand   a:hover {
         color: #C57ED3;
         border: 1px solid #C57ED3;
      } 
   
.nav.navbar-nav.navbar-right li a {
    color: white;
	 margin-top: 10px;
}
  

    


  //Collapsed styles
  .navbar-toggle {
    border-color: #C57ED3;
  }
      &:hover, &:focus {
        background-color: #490D40;
      }



      .icon-bar {
        color: #C57ED3;
        background-color: #C57ED3;

      }
  

  .navbar-collapse.collapse.in ul {
    background-color: #490D40;
  }
    




/* Solid class attached on scroll past first section */

.navbar.solid {
  background-color: #490D40;
  transition: background-color 1s ease 0s;
  box-shadow: 0 0 4px grey;
}
    .navbar-brand {
      color: #C57ED3;
      transition: color 1s ease 0s;
    }

    .navbar-nav > li > a {
            color: #C57ED3;
            transition: color 1s ease 0s;
          }
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RESUME</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

        <!--jQuery library--> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

        <!--Latest compiled and minified JavaScript--> 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="p.css">

</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Ayan Adhikary</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">About me</a></li>
            <li><a href="#">Education</a></li>
            <li><a href="#">Skills</a></li>
			<li><a href="#">Resume</a></li>
			<li><a href="#">Contact me</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
	
<div id="particles-js"><h1>hello</h1>
<h2>hello hello hello hello</h2>
<p> welcome to my webpage.....thanks</p></div>

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script src="particles.js"></script>
<script src="app.js"></script>
<div id="r">
</div>
<script>
$(document).ready(function() {
        // Transition effect for navbar 
        $(window).scroll(function() {
          // checks if window is scrolled more than 500px, adds/removes solid class
          if($(this).scrollTop() > 300) { 
              $('.navbar').addClass('solid');
          } else {
              $('.navbar').removeClass('solid');
          }
        });
});
</script>
		
</body>
</html>
我从 github 下载了particle.js-master zip 文件。和particles.js 将是相同的。

标签： javascriptjqueryhtmltwitter-bootstrapcss

解决方案

推荐阅读