javascript - fullpage.js 滚动的 particle.js 更长-6ren

javascript - fullpage.js 滚动的 particle.js 更长

转载作者：行者123 更新时间：2023-11-30 14:57:44

34

4

我遇到了这个问题，我已经尝试解决了很长一段时间。理想情况下，我希望 particles.js 的“生成框”向下延伸到页面底部(由 fullpage.js 计算的 7 x viewport)，这样当使用 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>

最佳答案

基本上我的想法是:height: 100% 由于 FullPage.js 而不起作用，所以让我们设置一个固定的高度。

这是您的 JSFiddle:https://jsfiddle.net/MrMavin/0gop9xp9/

感谢@Nic来自 How to get height of entire document with JavaScript?

关于javascript - fullpage.js 滚动的 particle.js 更长，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46990412/

34

4

0

文章推荐： javascript - 这个 CSS 动画链应该无限运行，但它没有

文章推荐： javascript - TypeScript 关联数组

文章推荐： javascript - 动态更改后不应用功能

文章推荐： javascript - 每隔几秒从 HTTP 源获取和更新文本到 HTTPS 网站

javascript - 三.js : Pass text instead of particles into particle cloud
我有一个 fork 的 Three.js codepen 实验，其中有方形颗粒漂浮在周围。但我正在尝试修改它，以便我可以将文本(几何图形？)传递到其中，替换方形粒子，有点像单词/标签云。这可能吗？
Particles.js：为Web项目增添动态粒子效果
Particles.js：为Web项目增添动态粒子效果示例介绍 Particles.js是一个轻量级的JavaScript库，用于在Web页面上创建和管理动态粒子效果。它允许开发者通
particle-filter - 在带替换的粒子过滤器中重新采样
请帮忙。跟踪帧中对象的凝聚算法步骤是: 初始化一个点，在它周围随机选择N个点，设置权重为1/N。根据动态模型(等速模型)传播点。现在，使用观察模型计算每个粒子的权重。到现在为止，有N个粒子。现在
css - particles.js动画区域被文字和图片遮挡
我想在整个绿色区域的背景中获得粒子动画，但文本和图像被阻挡(参见 http://billiving-qa.azurewebsites.net)。动画仅出现在绿色区域的底部。这是包装 div: 谢谢
javascript - Particles.js — 框架更改时修改
为我完全缺乏 javascript 直觉而道歉，但我想知道是否可以更改 particles.js 的属性动态对象: 我正在使用 jQuery 来检测用户何时在屏幕上移动 slider (成功)。但是，
javascript - particles.js 未正确加载到页面上
HTML 脚本 particlesJS.load('particles-js', 'particles.json', function(){ console.lo
javascript - Particles JS - 如何更改线条之间的背景颜色？
拜托，我需要帮助... 我必须创建一个粒子 JS Canvas 。这并不难，但我必须像这样更改每行之间的背景颜色: 例子我浏览了粒子 JS 提供的所有设置，但没有做我需要的事情......如果有人可
javascript - 无法添加 particles.js
我在我的网站上实现 particles.js 时遇到问题。我收到错误:Uncaught ReferenceError: particlesJS is not defined。我尝试了下载网站上的演示，
html - 使用 particles.js
我使用 particles.js 作为我的背景，但粒子只跨越到窗口的大小，并在向下滚动时消失。为了解决这个问题，我将 position: fixed; 添加到它的 css 选择器中。尽管粒子完全跨越了
javascript - Particles.js 不与光标交互
我有一个 particles.js 文件作为我网站的背景，它显示正确但不与鼠标交互，它只设置为像视频一样。非常感谢您。更新:在下面的评论中解决。只需在您的 app.js 中更改“窗口”而不是“ C
javascript - 如何更改背景以放置 particles.js？
我从 Envato 购买了模板“Penelope”，我想用 particles.js 背景更改背景。这是为我提供此模板的原始 CSS。我想知道如何更改它以放置 particles.js 背景。我的r
javascript - 在正确的图层上获取 particles.js？
我做不到particles.js作为背景工作。它覆盖了整个页面，我尝试为我想要覆盖 particles.js 的所有内容设置更高的 z-index (50)。这是 particles codepen
javascript - Particles.js 不允许围绕文本生成
我终于让 particle.js 作为背景工作了。但是当您点击文本上方或下方(高度方向)时，您只能生成星星，您不能在文本所在的位置(或与其容器在同一行)生成它们。有办法解决这个问题吗？我的 HT
javascript - 如何在一个页面中多次使用 particles.js？
我想知道如何在单个页面中多次添加多个 particles.js？似乎每页只能执行一次。但我想不止一次使用它，比如在 2 个单独的 div 中。我怎样才能做到这一点？我只能做一次，但似乎不能在另一个 d
c++ - 粒子系统 : particle generation
我有一个系统可以从源中生成粒子并更新它们的位置。目前，我在 OpenGL 中编写了一个程序，它调用我的 GenerateParticles(...) 和 UpdateParticles(...) 并显
javascript - particles.js 没有覆盖整个页面
我正在尝试使用 particles.js 作为背景，但我无法将 Canvas 设置为全尺寸背景。我针对类似问题尝试了至少 10 种不同的解决方案，但均无效果。 Canvas 始终作为具有与屏幕宽高比
javascript - Particles.js 仅作为特定部分的背景
我正在使用 Vincent Garreau 的 Particles.js(会链接但不能共享多个链接)在我网站的特定部分实现粒子效果背景。
javascript - 如何使用 particles.js？
我似乎无法让 particles.js 正常工作——我究竟做错了什么？任何见解将不胜感激，我无法确定错误是否是由于外部依赖性造成的... HTML: CSS: /* ---- particles
javascript - Particles.js 作为背景？
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
c# - Unity Particle Collider 与粒子
团结我创建了两个碰撞器效果，并希望它们在相互碰撞时可以发挥某些作用。但我不知道如何制作两个粒子对撞机。如何让火与水相撞，水能灭火。感谢帮助!!!! 最佳答案来自文档 ( http://docs.u

首页

博学

6Ren·AI

商城

javascript - fullpage.js 滚动的 particle.js 更长