おもしろい背景を作りたい
浦島です。今回は幾何学的な背景が作れるjQuery「Particleground」を紹介します。
公式サイトでサンプルをご覧ください。
必要なファイル
公式サイトからファイルをダウンロードしましょう
必要なファイルはこれだけ
「jquery」と「jquery.particleground.min.js」をhead内に読み込んで行きましょう。
jQueryを反映させる範囲を決めましょう
今回は、背景全面を幾何学模様に変えていきます。
|
1 2 3 |
<body class="particle"> </body> |
bodyにクラスをつけていきます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> html, body { width: 100%; height: 100%; overflow: hidden; } body { background: #16a085; font-family: 'Montserrat', sans-serif; color: #fff; line-height: 1.3; -webkit-font-smoothing: antialiased; } </style> |
cssで背景色をつけます。
スクリプトを動かすコード
|
1 2 3 4 5 6 7 8 |
<script> $('.particle').particleground({ dotColor: '#ffffff', //点の色 lineColor: '#ddd', //線の色 particleRadius: 8, //点の大きさ lineWidth: '1', //点をつなぐ線の太さ }); </script> |
点の色を変えたり、線の太さを変えたりなどオプションがあります。
他にもあるのでこちらでチェックしてみてください
github
最終的なコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="ja"> <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>particle test</title> <style> html, body { width: 100%; height: 100%; overflow: hidden; } body { background: #16a085; font-family: 'Montserrat', sans-serif; color: #fff; line-height: 1.3; -webkit-font-smoothing: antialiased; } </style> </head> <body class="particle"> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="jquery.particleground.min.js"></script> <script> $('.particle').particleground({ dotColor: '#ffffff', //点の色 lineColor: '#ddd', //線の色 particleRadius: 8, //点の大きさ lineWidth: '1', //点をつなぐ線の太さ }); </script> </html> |
以上、幾何学的な背景が作れるjQuery「Particleground」を紹介でした。
他にもjQueryのプラグインを紹介しているので見ていってくれると嬉しいです。
Follow me!
