ポリゴン状の背景が作れるjQuery「Geometryangle」

おしゃれな背景が作りたい

浦島です。今回は、ポリゴン状の背景が作れるjQuery「Geometryangle」を紹介します。
他のどのサイトよりもわかりやすく紹介していきます
まずは公式サイトをご覧くださいと言いたかったのですが、公式サイトが存在していませんでした。

githubからファイルをダウンロードしよう

githabからダウンロードしたフォルダを解凍しましょう
今回必要なファイルは「geometryangle.min.js」だけ

jQueryとgeometryangleを読み込もう

head内に下記のコードを書き込んでいきましょう

 

スクリプトの書き方

body内に書き込んでいきましょう

最終的なコードはこちら

cssをいじってポリゴンが全体に表示する様にしてみました。

cssでポリゴンが全体に表示する様にしてみました
mesh、 lights、 line、vertexの値を変更してお好みのポリゴンを作ってみてくださいね。

mesh

width1.2
height1.2
depth10
columnsundefined
columns_autotrue
rowsundefined
rows_autotrue
zoom1
xRange0.8
yRange0.1
zRange1.0
ambient‘rgba(85, 85, 85, 1)’
diffuse‘rgba(255, 255, 255, 1)’
background‘rgb(255, 255, 255)’
speed0.0002
fluctuationSpeed0.5
fluctuationIntensity0
floorPositionfalse
drawtrue

lights

count1
xyScalar1
zOffset100
ambient‘rgba(255,0,102, 1)’
diffuse‘rgba(255,136,0, 1)’
speed0.010
gravity1200
dampening0.95
minLimit10
maxLimitnull
minDistance20
maxDistance400
autopilotfalse
drawfalse

line

fill‘rgba(0, 0, 0, 0)’
thickness1
fluctuationIntensity0
fluctuationSpeed0.5
drawfalse

vertex

radius0
fill‘rgba(0, 0, 0, 0)’
fluctuationSpeed0.5
fluctuationIntensity0
strokeWidth0
strokeColor‘rgba(0, 0, 0, 0)’
drawfalse

以上、ポリゴン状の背景が作れるjQuery「Geometryangle」の紹介でした。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP