雪が降る

<!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";

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

#wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

a {
  color: #fff;
}

/*========= particle js を描画するエリア設定 ===============*/

html,
body {
  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%;
}

.panel {
  font-family: "Merienda", cursive;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  position: absolute;
  z-index: 1;
  color: #000;
}

a {
  color: #0bd;
}</style>
</head>
<body>
<body>
<div id="particles-js">
</div>
<div id="wrapper">
<p class="panel">particles.js Demo<br>
<a href="https://vincentgarreau.com/particles.js/" target="_blank">https://vincentgarreau.com/particles.js/</a>
</p>
<!--/wrapper-->
</div>
<script>particlesJS("particles-js", {
  particles: {
    number: {
      value: 300, //この数値を変更すると雪の数が増減できる
      density: {
        enable: true,
        value_area: 800 } },


    color: {
      value: "#ffffff" },

    shape: {
      type: "image", //形状は画像を指定
      stroke: {
        width: 3,
        color: "#fff" },

      image: {
        src: "/wp-content/uploads/demos/_assets/snow.png", //画像を指定
        width: 300,
        height: 300 } },


    opacity: {
      value: 0.7,
      random: false,
      anim: {
        enable: false,
        speed: 2,
        opacity_min: 0.1,
        sync: false } },


    size: {
      value: 5,
      random: true,
      anim: {
        enable: false,
        speed: 20,
        size_min: 0.1,
        sync: false } },


    line_linked: {
      enable: false },

    move: {
      enable: true,
      speed: 3, //この数値を小さくするとゆっくりな動きになる
      direction: "bottom", //下に向かって落ちる
      random: true, //動きはランダム
      straight: false, //動きをとどめない
      out_mode: "out", //画面の外に出るように描写
      bounce: false, //跳ね返りなし
      attract: {
        enable: true,
        rotateX: 300,
        rotateY: 1200 } } },



  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: false },

      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";

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

#wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

a {
  color: #fff;
}

/*========= particle js を描画するエリア設定 ===============*/

html,
body {
  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%;
}

.panel {
  font-family: "Merienda", cursive;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  position: absolute;
  z-index: 1;
  color: #000;
}

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: 300, //この数値を変更すると雪の数が増減できる
      density: {
        enable: true,
        value_area: 800 } },


    color: {
      value: "#ffffff" },

    shape: {
      type: "image", //形状は画像を指定
      stroke: {
        width: 3,
        color: "#fff" },

      image: {
        src: "/wp-content/uploads/demos/_assets/snow.png", //画像を指定
        width: 300,
        height: 300 } },


    opacity: {
      value: 0.7,
      random: false,
      anim: {
        enable: false,
        speed: 2,
        opacity_min: 0.1,
        sync: false } },


    size: {
      value: 5,
      random: true,
      anim: {
        enable: false,
        speed: 20,
        size_min: 0.1,
        sync: false } },


    line_linked: {
      enable: false },

    move: {
      enable: true,
      speed: 3, //この数値を小さくするとゆっくりな動きになる
      direction: "bottom", //下に向かって落ちる
      random: true, //動きはランダム
      straight: false, //動きをとどめない
      out_mode: "out", //画面の外に出るように描写
      bounce: false, //跳ね返りなし
      attract: {
        enable: true,
        rotateX: 300,
        rotateY: 1200 } } },



  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: false },

      onclick: {
        enable: false },

      resize: true } },


  retina_detect: true });
//# sourceURL=pen.js