问用于particle.js滚动的fullpage.js更长时间
EN

Stack Overflow用户

提问于 2017-10-28 13:45:41

回答 1查看 1.7K关注 0票数 1

我想解决这个问题已经有一段时间了。理想情况下，我希望particles.js将它的“产卵框”向下延伸到页面底部(根据fullpage.js计算的7x视图)，这样当使用fullpage.js向下滚动时，整个页面的内容只会向上移动一张幻灯片(因此，particles.js从上到下覆盖了整个网站的高度)。

到目前为止，我得到的是：

码

body, html {
	margin: 0;
	padding: 0;
}

#container {
    max-width: inherit;
    background: rgb(111, 210, 255);
}

#particles-js {
	width: 100%;
	height: 100%;
}

.logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 256px;
	height: 256px;
	margin-top: -128px;
	margin-left: -128px;
	z-index: 2;
}

canvas {
    position: absolute; 
    top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    z-index: 1;
}

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="author" content="PachiSquid">
	
	<title>PachiSquid</title>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	
	<link href="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" type="text/css">
	<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
	
	<script src="https://raw.githubusercontent.com/VincentGarreau/particles.js/master/particles.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$('#fullpage').fullpage({
				anchors: ['home', 'release', 'about', 'music', 'live', 'shop', 'contact'],
				scrollingSpeed: 1000,
			})
		})
	</script>
	
</head>

<body id="container">
	<ul id="menu">
		<li data-menuanchor="home"><a href="#home">HOME</a></li>
		<li data-menuanchor="release"><a href="#release">RELEASE</a></li>
		<li data-menuanchor="about"><a href="#about">ABOUT</a></li>
		<li data-menuanchor="music"><a href="#music">MUSIC</a></li>
		<li data-menuanchor="live"><a href="#live">LIVE</a></li>
		<li data-menuanchor="shop"><a href="#shop">SHOP</a></li>
		<li data-menuanchor="contact"><a href="#contact">CONTACT</a></li>
	</ul>
	
	<div id="fullpage">
		<div id="particles-js">
			<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
		</div>
		<div class="section active" id="section1">
			<div class="intro">
				<img class="logo" src="https://gdurl.com/7GCM">
			</div>
		</div>
		<div class="section" id="section2">
			<div class="intro">
				<p>
					Release
				</p>
			</div>
		</div>
		<div class="section" id="section3">
			<div class="intro">
				<p>
					About
				</p>
			</div>
		</div>
		<div class="section" id="section4">
			<div class="intro">
				<p>
					Music
				</p>
			</div>
		</div>			
		<div class="section" id="section5">
			<div class="intro">
				<p>
					Live
				</p>
			</div>
		</div>
		<div class="section" id="section6">
			<div class="intro">
				<p>
					Shop
				</p>
			</div>
		</div>
		<div class="section" id="section7">
			<div class="intro">
				<p>
					Contact
				</p>
			</div>
		</div>
	</div>
		
	<script>
		particlesJS("particles-js",{"particles":{"number":{"value":13,"density":{"enable":true,"value_area":1000}},"color":{"value":"#ffffff"},"shape":{"type":"image","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"https://gdurl.com/0VzA","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":41.6,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":0.6,"direction":"top","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"window","events":{"onhover":{"enable":false,"mode":"grab"},"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":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
	</script>
</body>

</html>

javascript