WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。2019年8月14日web制作をされている方ならば、サイトを訪れてくれた人を少しでも長く引き留めたいと思われると思います。やって見てくれる人の興味をひけるのか。色々な方法がありますが、その一つとして面白い動きをするサイトならば、動きのないサイトよりも少しは目を引くのではないかと思います。今回は面白い動きのある背景を簡単に実装できる方法をご紹介したいと思います。この方法はマウスの動きにも連動しているので、見ているだけでなく、自分で動かすことが出来るのでとても面白いです。デモひとまずデモなので、狭い範囲のみですが、これをサイト全体の背景に敷いてあげればインパクトのあるサイトが出来るのではないかと思います。実装方法jqueryと初めにJSを設置します。src=”[ファイルへのパス]/jquery.particleground.min.js”></script>次にパラメータの設定を行います。//ドットの大きさの設定});});最後に上記で設定した要素を記述します。今回は「#particles」で記述しています。id=”particles”></div>これで実装完了です。オプション【minSpeedX】particleの、X軸(横)移動の移動時間の最小時間を指定。デフォルト:0.1【maxSpeedX】particleの、X軸(横)移動の移動時間の最大時間を指定。デフォルト:0.7【minSpeedY】particleの、Y軸(縦)移動の移動時間の最小時間を指定。デフォルト:0.1【maxSpeedY】particleの、Y軸(縦)移動の移動時間の最大時間を指定。デフォルト:0.7【directionX】X軸(横)のparticleが流れていく方向の指定。”center”、”left”、”right”。デフォルト:center【directionY】Y軸(横)のparticleが流れていく方向の指定。”center”、”up”、”bottom”。生成されるparticleの密度を指定。デフォルト:10000【dotColor】ドットの色を指定します。デフォルト:#666666【lineColor】ドットをつなぐ線の色を指定。デフォルト:#666666【particleRadius】ドットの大きさを指定。デフォルト:7【lineWidth】ドットをつなぐ線の太さを指定。デフォルト:1【curvedLines】ドットをつなぐ線を指定。デフォルト:false【proximity】ドット同士が、どのくらい近づいたら線で結ぶかをpx数で指定。デフォルト:100【parallax】マウスの動きに合わせた視差効果の有無を指定。視差効果による動きの大きさを指定。終わったタイミングで実行する処理を記述。{}【onDestroy】particlegroundがdestroy(削除)された後に実行する処理を指定。{}これで動きのあるサイトが出来ます。ファイルのダウンロードは下記からお願い致します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。今からjQueryを使ってみようと思っている方必見。jQueryの便利な使い方をご紹介します。こちらではjqueryで簡単にロールオーバーをかける方法をご紹介しました。web初心者のKです。春色が感じられるサイトを集めてみようと思います。真冬生まれのため連日の暑さに耐えきれず瀕死状態のAD&デザイナーMです。...PREVcsvでインポートする場合、セルのテキストを簡単にダブルクォーテーションで囲む方法。WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。