<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js">
</script>
<style>@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Merienda");
/*========= レイアウトのためのCSS ===============*/
#wrapper {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
}
a {
color: #fff;
}
/*========= particle js を描画するエリア設定 ===============*/
html,
body {
font-family: "Merienda", cursive;
height: 100%; /*高さを100%にして描画エリアをとる*/
}
#particles-js {
position: fixed; /*描画固定*/
z-index: -1; /*描画を一番下に*/
width: 100%;
height: 100%;
background-color: #000; /*背景色*/
}
#wrapper {
position: relative; /*描画を#particles-jsよりも上にするためposition:relative;を指定*/
z-index: 1; /*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
width: 100%;
height: 100%;
}
.box {
color: #000;
background: #fff;
border-radius: 5px;
padding: 20px;
text-align: center;
position: absolute;
z-index: 1;
}
a {
color: #0bd;
}</style>
</head>
<body>
<body>
<div id="particles-js">
</div>
<div id="wrapper">
<div class="box">
<h1>particles.js Demo</h1>
<p>
<a href="https://vincentgarreau.com/particles.js/" target="_blank">https://vincentgarreau.com/particles.js/</a>
</p>
</div>
<!--/wrapper-->
</div>
<script>particlesJS("particles-js", {
particles: {
number: {
value: 200, //この数値を変更すると幾何学模様の数が増減できる
density: {
enable: true,
value_area: 800 } },
color: {
value: ["#00bbdd", "#404B69", "#DBEDF3"] //色
},
shape: {
type: "polygon", //形状はpolygonを指定
stroke: {
width: 0 },
polygon: {
nb_sides: 50 //多角形の角の数
},
image: {
width: 190,
height: 100 } },
opacity: {
value: 0.664994832269074,
random: false,
anim: {
enable: true,
speed: 2.2722661797524872,
opacity_min: 0.08115236356258881,
sync: false } },
size: {
value: 7,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false } },
line_linked: {
enable: true,
distance: 140,
color: "#DBEDF3",
opacity: 1,
width: 1 },
move: {
enable: true,
speed: 6, //この数値を小さくするとゆっくりな動きになる
direction: "none", //方向指定なし
random: true, //動きはランダム
straight: false, //動きをとどめない
out_mode: "out", //画面の外に出るように描写
bounce: false, //跳ね返りなし
attract: {
enable: false,
rotateX: 600,
rotateY: 961.4383117143238 } } },
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "repulse" },
onclick: {
enable: false },
resize: true } },
retina_detect: true });
//# sourceURL=pen.js</script>
</body>
</html>/*
外部依存 CSS:
- https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
外部依存 JS (このデモは下記の JS にも依存します):
- https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js
*/
@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Merienda");
/*========= レイアウトのためのCSS ===============*/
#wrapper {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
}
a {
color: #fff;
}
/*========= particle js を描画するエリア設定 ===============*/
html,
body {
font-family: "Merienda", cursive;
height: 100%; /*高さを100%にして描画エリアをとる*/
}
#particles-js {
position: fixed; /*描画固定*/
z-index: -1; /*描画を一番下に*/
width: 100%;
height: 100%;
background-color: #000; /*背景色*/
}
#wrapper {
position: relative; /*描画を#particles-jsよりも上にするためposition:relative;を指定*/
z-index: 1; /*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
width: 100%;
height: 100%;
}
.box {
color: #000;
background: #fff;
border-radius: 5px;
padding: 20px;
text-align: center;
position: absolute;
z-index: 1;
}
a {
color: #0bd;
}/*
外部依存 JS:
- https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js
外部依存 CSS (このデモは下記の CSS にも依存します):
- https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
*/
particlesJS("particles-js", {
particles: {
number: {
value: 200, //この数値を変更すると幾何学模様の数が増減できる
density: {
enable: true,
value_area: 800 } },
color: {
value: ["#00bbdd", "#404B69", "#DBEDF3"] //色
},
shape: {
type: "polygon", //形状はpolygonを指定
stroke: {
width: 0 },
polygon: {
nb_sides: 50 //多角形の角の数
},
image: {
width: 190,
height: 100 } },
opacity: {
value: 0.664994832269074,
random: false,
anim: {
enable: true,
speed: 2.2722661797524872,
opacity_min: 0.08115236356258881,
sync: false } },
size: {
value: 7,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false } },
line_linked: {
enable: true,
distance: 140,
color: "#DBEDF3",
opacity: 1,
width: 1 },
move: {
enable: true,
speed: 6, //この数値を小さくするとゆっくりな動きになる
direction: "none", //方向指定なし
random: true, //動きはランダム
straight: false, //動きをとどめない
out_mode: "out", //画面の外に出るように描写
bounce: false, //跳ね返りなし
attract: {
enable: false,
rotateX: 600,
rotateY: 961.4383117143238 } } },
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "repulse" },
onclick: {
enable: false },
resize: true } },
retina_detect: true });
//# sourceURL=pen.js