<!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://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="http://localhost:10072/wp-content/uploads/demos/_assets/particleText.min.js">
</script>
<style>@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

body {
  background-image: linear-gradient(
    112.1deg,
    rgba(30, 30, 30, 1) 11.4%,
    rgba(63, 76, 119, 1) 70.2%
  );
  word-wrap: break-word;
}

/*========= 粒子を描画するエリア設定 ===============*/

#wrapper {
  /*描画されるテキストを中央寄せにする*/
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

#particle {
  width: 100%;
  height: 100vh;
  vertical-align: bottom; /*canvasタグ下に余白が生まれるのを防ぐ*/
  font-size: clamp(12px, 4vw, 2rem);
}</style>
</head>
<body>
<body>
<div id="wrapper">
<canvas id="particle">
</canvas>
<!--/wrapper-->
</div>
<script>$("#particle").particleText({
  text: "WEB先案内<br>
<br>Web Navigator", // 表示させたいテキスト。改行の場合は<br>追加
  colors: ["#ffff00", "#ffff7a", "#ffff3d"], // パーティクルの色を複数指定可能
  speed: "high" // slow, middle, high の3つから粒子が集まる速さを選択
});
//# sourceURL=pen.js</script>
</body>
</html>
/* 
   外部依存 CSS:
     - https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
   外部依存 JS (このデモは下記の JS にも依存します):
     - https://code.jquery.com/jquery-3.4.1.min.js
     - http://localhost:10072/wp-content/uploads/demos/_assets/particleText.min.js
 */

@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

body {
  background-image: linear-gradient(
    112.1deg,
    rgba(30, 30, 30, 1) 11.4%,
    rgba(63, 76, 119, 1) 70.2%
  );
  word-wrap: break-word;
}

/*========= 粒子を描画するエリア設定 ===============*/

#wrapper {
  /*描画されるテキストを中央寄せにする*/
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

#particle {
  width: 100%;
  height: 100vh;
  vertical-align: bottom; /*canvasタグ下に余白が生まれるのを防ぐ*/
  font-size: clamp(12px, 4vw, 2rem);
}
/* 
   外部依存 JS:
     - https://code.jquery.com/jquery-3.4.1.min.js
     - http://localhost:10072/wp-content/uploads/demos/_assets/particleText.min.js
   外部依存 CSS (このデモは下記の CSS にも依存します):
     - https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
 */

$("#particle").particleText({
  text: "WEB先案内<br><br>Web Navigator", // 表示させたいテキスト。改行の場合は<br>追加
  colors: ["#ffff00", "#ffff7a", "#ffff3d"], // パーティクルの色を複数指定可能
  speed: "high" // slow, middle, high の3つから粒子が集まる速さを選択
});
//# sourceURL=pen.js