个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我使用 particles.js 作为我的背景，但粒子只跨越到窗口的大小，并在向下滚动时消失。为了解决这个问题，我将 position: fixed; 添加到它的 css 选择器中。尽管粒子完全跨越了页面，但网页上的所有超链接都被停用了。为什么会这样？任何解决方法？
编辑: particles.js 的 Github 存储库 https://github.com/VincentGarreau/particles.js/
<div id="particles-js"></div>
<script src="particles.js"></script>
<script src="site/js/app.js"></script>
CSS 实现:
#particles-js{
width: 100%;
height: 100%;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
JS文件请引用上述资源库。它实际上是 app.js 和 particles.js 在插件中完成主要工作。
最佳答案
我遇到了同样的问题，解决方法如下:
CSS
#particles-js{
width: 100%;
height: 100%;
position: fixed;
background-color: #000;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.body-particles{
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
HTML
<html>
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- SOME CSSs HERE -->
<link rel="stylesheet" media="screen" href="assets/css/particles.css">
<!-- SOME SCRIPTS HERE -->
</head>
<body>
<div class="body-particles">
<!-- Wrapper -->
<div id="wrapper">
<!-- MY STUFF HERE, STYLED WITH MY CSS -->
</div>
</div>
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- scripts -->
<script src="assets/js/particles.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>
为了使超链接起作用(与 particles.js 触摸事件一起)，我将类 mouseEvents 添加到我需要关注的元素(例如超链接、导航栏等)
CSS
.body-particles{
pointer-events: none;
}
.mouseEvents{
pointer-events: all;
}
关于html - 使用 particles.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45486736/
25
4
0
我有一个 fork 的 Three.js codepen 实验，其中有方形颗粒漂浮在周围。 但我正在尝试修改它，以便我可以将文本(几何图形？)传递到其中，替换方形粒子，有点像单词/标签云。这可能吗？
Particles.js：为Web项目增添动态粒子效果 示例 介绍 Particles.js是一个轻量级的JavaScript库，用于在Web页面上创建和管理动态粒子效果。它允许开发者通
请帮忙。跟踪帧中对象的凝聚算法步骤是: 初始化一个点，在它周围随机选择N个点，设置权重为1/N。 根据动态模型(等速模型)传播点。 现在，使用观察模型计算每个粒子的权重。到现在为止，有N个粒子。 现在
我想在整个绿色区域的背景中获得粒子动画，但文本和图像被阻挡(参见 http://billiving-qa.azurewebsites.net)。动画仅出现在绿色区域的底部。 这是包装 div: 谢谢
为我完全缺乏 javascript 直觉而道歉，但我想知道是否可以更改 particles.js 的属性动态对象: 我正在使用 jQuery 来检测用户何时在屏幕上移动 slider (成功)。但是，
HTML 脚本 particlesJS.load('particles-js', 'particles.json', function(){ console.lo
拜托，我需要帮助... 我必须创建一个粒子 JS Canvas 。这并不难，但我必须像这样更改每行之间的背景颜色: 例子 我浏览了粒子 JS 提供的所有设置，但没有做我需要的事情......如果有人可
我在我的网站上实现 particles.js 时遇到问题。我收到错误:Uncaught ReferenceError: particlesJS is not defined。我尝试了下载网站上的演示，
我使用 particles.js 作为我的背景，但粒子只跨越到窗口的大小，并在向下滚动时消失。为了解决这个问题，我将 position: fixed; 添加到它的 css 选择器中。尽管粒子完全跨越了
我有一个 particles.js 文件作为我网站的背景，它显示正确但不与鼠标交互，它只设置为像视频一样。 非常感谢您。 更新:在下面的评论中解决。只需在您的 app.js 中更改“窗口”而不是“ C
我从 Envato 购买了模板“Penelope”，我想用 particles.js 背景更改背景。这是为我提供此模板的原始 CSS。我想知道如何更改它以放置 particles.js 背景。 我的r
我做不到particles.js作为背景工作。它覆盖了整个页面，我尝试为我想要覆盖 particles.js 的所有内容设置更高的 z-index (50)。这是 particles codepen
我终于让 particle.js 作为背景工作了。 但是当您点击文本上方或下方(高度方向)时，您只能生成星星，您不能在文本所在的位置(或与其容器在同一行)生成它们。 有办法解决这个问题吗？ 我的 HT
我想知道如何在单个页面中多次添加多个 particles.js？似乎每页只能执行一次。但我想不止一次使用它，比如在 2 个单独的 div 中。我怎样才能做到这一点？我只能做一次，但似乎不能在另一个 d
我有一个系统可以从源中生成粒子并更新它们的位置。目前，我在 OpenGL 中编写了一个程序，它调用我的 GenerateParticles(...) 和 UpdateParticles(...) 并显
我正在尝试使用 particles.js 作为背景，但我无法将 Canvas 设置为全尺寸背景。 我针对类似问题尝试了至少 10 种不同的解决方案，但均无效果。 Canvas 始终作为具有与屏幕宽高比
我正在使用 Vincent Garreau 的 Particles.js(会链接但不能共享多个链接)在我网站的特定部分实现粒子效果背景。
我似乎无法让 particles.js 正常工作——我究竟做错了什么？任何见解将不胜感激，我无法确定错误是否是由于外部依赖性造成的... HTML: CSS: /* ---- particles
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
团结 我创建了两个碰撞器效果，并希望它们在相互碰撞时可以发挥某些作用。但我不知道如何制作两个粒子对撞机。如何让火与水相撞，水能灭火。感谢帮助!!!! 最佳答案 来自文档 ( http://docs.u
我是一名优秀的程序员,十分优秀！