- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个主要英雄部分,我想在其中使用粒子 js 创建效果。我有链接的 particle.js 文件和 app.js 文件以及我自己的主 js 文件,但由于某种原因,粒子没有显示。可能是因为图像没有显示粒子吗?谢谢。
particlesJS('snowfall',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"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": true,
"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"
}
}
);
html {
font-size: 62.5%;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
font-size: 1.4rem;
}
h1 {
font-size: 2.4rem;
}
.container-item {
margin: 0 auto 0;
}
.landing-page-container {
width: 100%;
min-height: 100%;
height: 100vh;
background-image: linear-gradient(to right, rgba(230, 230, 230, 0.4), rgba(230, 230, 230, 1)), url(ME.jpg);
/* background-position: bottom;*/
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
display: block;
font-family: "Montserrat", sans-serif;
color: #09383E;
height: 100vh;
}
.content-wrapper {
max-width: 12000px;
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
/*.header {*/
/*
width: 100%;
height: 2rem;
padding: 3rem 0;
display: block;
*/
}
.menu-icon {
width: 2.5rem;
height: 1.5rem;
display: inline-block;
cursor: pointer;
}
.header-item {
display: inline-block;
float: left;
}
.menu-icon-line {
width: 1.5rem;
height: .2rem;
background: #0C383E;
display: block;
}
.menu-icon-line:before,
.menu-icon-line:after {
content: '';
width: 1.5rem;
height: .2rem;
background: #0C383E;
display: inline-block;
position: relative;
}
.menu-icon-line:before {
left: .5rem;
top: -0.6rem;
}
.menu-icon-line:after {
top: -1.8rem;
}
.heading {
width: 90%;
font-size: 2rem;
font-weight: bold;
line-height: 1.7rem;
margin: 0 30px;
text-align: center;
}
.social-container {
width: 7.25rem;
list-style: none;
overflow: hidden;
padding: 0;
margin: 0;
float: right;
}
.social-container .social-icon {
width: 1.5rem;
float: left;
cursor: pointer;
}
.social-container .social-icon.social-icon-fb {
margin-left: 1.5rem;
}
.social-container .social-icon.social-icon-tw {
margin-left: 0;
}
.social-container .social-icon.social-icon-in .fab {
margin: 0 0 .25rem;
}
.coords {
font-size: 1rem;
display: inline-block;
float: left;
position: relative;
top: 40%;
letter-spacing: .2rem;
left: -11.5rem;
margin: 0;
transform: rotate(-90deg) translateY(50%);
}
.arrow {
width: 50px;
position: absolute;
margin: 0 auto;
left: 50%;
top: 65%;
transform: translate(-50%, -50%);
}
.box {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span {
display: block;
width: 20px;
height: 20px;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg);
margin: -10px;
/* animation: animate 2s infinite;*/
animation: animate 2s infinite;
}
.box span:nth-child(2) {
animation-delay: -0.2s;
/* transform: rotate(45deg) translate(-20px, -20px);*/
}
.box span:nth-child(3) {
animation-delay: -0.4s;
}
@keyframes animate {
0% {
opacity: 0;
transform: rotate(45deg) translate(-20px, -20px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(45deg) translate(20px, 20px);
}
0% {
opacity: 0;
}
}
.ellipse-container {
width;
50rem;
height: 50rem;
border-radius: 50%;
margin: 0 auto;
position: relative;
top: 7rem;
}
h2.greeting {
text-align: center;
font-size: 6.5rem;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
/*NAVBAR*/
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: .5s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
@media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Everest landing page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</head>
<body>
<div class="container">
<div class="container-item landing-page-container" id="snowfall">
<div class="content-wrapper">
<header id="header" class="header">
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">LOGO</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
<p class="coords">27.9881° N /86.9250° E</p>
<!-- <div class="ellipse-container">-->
<h2 class="greeting">Visit Everest</h2>
<!--
<div class="ellipse ellipse-outer-thin">
<div class="ellipse ellipse-orbit"></div>
</div>
-->
<div class="ellipse ellipse-outer-thick"></div>
</div>
<!-- <img class="arrow" src="arrow.svg" alt="Down arrow">-->
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!--<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="js/script.js" defer="defer"></script>-->
</body>
</html>
英雄部分的 ID 为“snowfall”。
最佳答案
尝试在加载 main.js 之前加载 particles.js 文件
引用:https://stackoverflow.com/a/38271176/11932228
关于javascript - 我正在尝试使用 Particle js 让粒子出现在这个网站的主要英雄部分,但它不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57395659/
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档,我取得的大部分进展都是通过 GitHub issues 取得的。不,我不明白 HKT,所以没有帮助。 基本上,我在其他地方创建一个类型,ty
我必须创建一个正则表达式来搜索整个文件,以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是,它确实必须是单个正则表达式,并且它确实需要搜索
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
我有一个 if-else 语句,其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段 条件 2:ID 不匹配,所有字段均为空白。 ELSE 语句将它们全部填充 当我使条件
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分,以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题,但我似乎无法让 jsfiddl
这是我的情况: 我想使用 Google AdWords 的转换脚本,但出于某种原因,他们代码段的 javascript 部分在我的页面上添加了一些我似乎无法摆脱的不需要的空白。 所以我正在查看的选项纯
寻找一种优雅的方式在页面上添加一次脚本,就是这样。 我有一个需要 2 个 CSS 文件和 2 个 JS 文件的部分 View 。在大多数地方,只需要其中 1 个部分 View 。但在单个页面上,我需要
我想要一个网站,该网站始终具有相同的部分,具有相同的 id 以及我想要显示的所有内容。我对 javascript 不太了解,我想知道如何删除除特定部分之外的所有内容。 最好的方法是否是只执行一个循环来
SQL 语句教程 (11) Group By 我们现在回到函数上。记得我们用 SUM 这个指令来算出所有的 Sales (营业额)吧!如果我们的需求变成是要算出每一间店 (store_name)
我试图理解部分并认为我已经明白了。基本上,这是一种将部分应用程序应用于二元运算符的方法。所以我了解所有(2*) , (+1)等例子就好了。 但是在 O'Reilly Real World Haskel
有没有办法禁止在部分中覆盖给定的关键字参数?假设我要创建函数 bar总是有 a设置为 1 .在以下代码中: from functools import partial def foo(a, b):
我有这个使用节的 OpenMP 代码 #pragma omp parallel sections num_threads(8) { printf_s("Allo fro
我正在尝试重新创建 Apple 制作的有缺陷的 CNContactPickerViewController,因此我有一个数据数组 [CNContact],我需要将其整齐地显示在 UITableView
我有一个相对布局,其中包含一些 float 在 GridView 上的 TextView 。当我在网格中选择一个项目时,布局向下移动到屏幕的尽头,只有大约 1/5 的部分是可见的。这是使用简单的翻译动
我想在我的 tableView 中有两个部分。我希望将项目添加到第 0 节,然后能够选择一行以将其从第 0 节移动到第 1 节。到目前为止,我已将这些项目添加到第 0 节,但是当它关闭时数据不会加
我正在以自由职业者的身份开发支付控制软件,但我有一些关于 mysql 的问题。 。我有一个用作日志的表,名为“Bitacora”。在表中,我有一个名为 idCliente 的列,它是自己表中一个人的
我有一个 PFQueryTableViewController,我想向 tableview 添加部分,我这样尝试: - (PFQuery *)queryForTable { PFQuery *qu
我正在尝试编写一个查询,将部分匹配项与存储的名称值进行匹配。 我的数据库如下所示 Blockquote FirstName | Middle Name | Surname --------------
我正在开发一个语音备忘录应用程序,并且正在将文件保存到表格 View 中。我希望默认文件名显示为“新文件 1”,如果使用“新文件 1”,则它会显示为“新文件 2”,依此类推。 我正在尝试使用 do-w
我有以下简单的 HTML 布局 .section1 { background: red; } .section2 { background: green; } .section3 { ba
我是一名优秀的程序员,十分优秀!