個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」

WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」

流行っているのかどうか定かではありませんが、海外のサイトなどで最近よく見かける幾何学的なポリゴンアニメーションをご存知ではないでしょうか。
とてもクールで、ぜひ取り入れてみたいなあ、と思っていたところ、簡単に実装できるスクリプトがありましたのでご紹介します。

WEBサイトの背景にポリゴンアニメーションを簡単に実装できる「particles.js」

particles.js」は、WEBサイトの背景にポリゴンアニメーションを簡単に実装できるスクリプトです。サイズはわずか25kb。
設定も簡単なのに、サイトにクールな印象をあたえる演出を施せます。
実際どんなアニメーションなのかは、こちらからご覧ください。

「particles.js」の実装方法

particles.jsでDownloadをクリックして必要ファイルを入手します。
particles.jsを読み込みます。
ここでは圧縮版を読み込みました。

続いて、読み込んだスクリプトの上あたりに、以下のidを入れた空の要素をつくります。

最後に、app.jsというファイルをつくって、その中に設定項目を記入します。
以下はデフォルトの設定です。

そのapp.jsをparticles.min.jsよりあとに読みこめば、設定完了です。

ダウンロードページに行くと、スライダーだけでいろいろと設定を変更できるので、興味があれば試してみてください。
著者のcodepenもあるので、そこでも設定の変更は可能です。
particles.js

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 2
  • 5

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl

記事を読む

CSSグラデーションをとっても簡単に生成するツール「Gradientoo」

CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき

記事を読む

CSSアニメーションを使ったエフェクトライブラー9

CSSアニメーションを使ったエフェクトライブラリー9

CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい

記事を読む

これが無料!ハイクオリティーなPhotoshop用WEBデザインテプンレート(psd)60+

海外のデザイナーがPhotoshopで作成したWEBデザイン用のテンプレート(psdファイル)をまと

記事を読む

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device

記事を読む

人気のHTML/CSSコードサンプル25+おまけ2 from CodePen

CodePenはHTML,CSS,JSのコードサンプル配布サイトです。 紹介されているコードの種類

記事を読む

今さら聞けない!作業時間を短縮するChrome用ショートカットベスト・コレクション

ブラウザはChromeを使ってます。 そのChromeでサイトを制作したり、ブログを書いたりしてい

記事を読む

100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた

100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた!?

各方面で紹介されている太っ腹な無料ストレージサービス「Shared」を利用し始めたところ、えらい目に

記事を読む

レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+

サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示で

記事を読む

CSS3をお手軽・簡単にするCSS3関連ツール&ジェネレーター43

ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る

ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr

記事を読む