CODEWITHSUNDEEP
javascripthtmlcssfullpage.jsparticles.js
PachiSquid
PachiSquid

Reputation: 11

particle.js longer for fullpage.js scrolling

I got this problem that I've been trying to solve for quite a while. Ideally, I would love particles.js to have its "spawn box" stretch down to the bottom the page (7 x viewport as calculated by fullpage.js) so that when scrolling down with fullpage.js, the whole page's content just moves up one slide (hence having particles.js covering the entire height of the website from top to bottom)

This is what I got so far:

CODE

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>

Upvotes: 1

Views: 1787

Answers (1)

Mavin
Mavin

Reputation: 64

Basically my idea is: height: 100% is not working due to FullPage.js, so let's set a fixed height.

Here's your JSFiddle: https://jsfiddle.net/MrMavin/0gop9xp9/

Thanks to @Nic from How to get height of entire document with JavaScript?

Upvotes: 2

Related Questions