背景の動き
-雪が降る-

デモページを見る

See the Pen 5-5 雪が降る by 動くWebデザインアイディア帳 (@ugokuweb)on CodePen.

「Result」内の表示を確かめてね!

動きを実現する仕組み

particles.jsというライブラリのオンラインジェネレーターを利用して描画を行い、HTML内のdivタグの背景に指定する。

[使用するライブラリ]
particles.js(https://vincentgarreau.com/particles.js/

HTMLの書き方

  1. head終了タグ直前に自作のCSSを読み込みます。
    <link rel="stylesheet" type="text/css" href="css/5-5.css">
    </head>
  2. body内の背景アニメーションを表示させたい場所にHTMLを記載します。
    <div id="particles-js"></div>
    <div id="wrapper">
    この中にコンテンツが入ります。
    <!--/wrapper--></div>
  3. body 終了タグ直前にparticle.jsと、動きを制御する自作のJS の2 つを読み込みます。
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <!--自作のJS-->
    <script src="js/5-5.js"></script>
    </body>

自作のCSS内の書き方

particle.jsで描画されたエリア(#particle-js)の上にコンテンツ(#wrapper)を設置する設定を行う。

html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	background-color:#070A31;/*背景色*/
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}

自作のJS内の書き方

※ここでは雪の画像を設定しています。画像はご自身で制作していただくか、下記のリンクから右クリックで画像を保存してご利用ください。
http://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/move02/5-5/img/snow.png

particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 100,//この数値を変更すると雪の数が増減できる
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "image",//形状は画像を指定
      "stroke": {
        "width": 3,
        "color": "#fff"
      },
      "image": {
        "src": "img/snow.png",//【重要】画像を指定!雪の画像を設定してください。
        "width": 120,
        "height": 120
      }
    },
    "opacity": {
      "value": 0.7,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "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
});

■ ジェネレーターを使ってオリジナルの動きを作成する方法

particles.js(https://vincentgarreau.com/particles.js/)のオンラインジェネレーターへアクセスし、
右側にあるツール内の項目を選択・数値変更を行う。最後に「Codepen」ボタンを押すと自作したソースコードが表示される。

particle.js説明

①プルダウンからベースになる形状を選択。

②各項目の変更を行います。変更は左画面にプレビューされる。

③「Codepen」ボタンを押すと自作したソースコードが別ウィンドウで開く。

④ CadePen内にコードが表示されたらJS項目内のみをコピーする。
その際、下の方に書かれている「var count_particles, stats, update;・・・」以下は必要のないコードなのでコピーしない。

particle.js説明

⑤ 自作のJavaScriptファイルに④でコピーしたソースコードを貼り付けて保存する。
particle.js説明

この技術を使ったサンプルサイト

バリエーション
を見る

「印象」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top