【jQuery】ポリゴン状のアニメーションを描画するGeometryangleの使い方

Image

Geometryangleはポリゴン状のアニメーションを描画するjqueryのプラグインになります。導入も簡単で、デフォルトの状態であればダウンロードしたプラグインを読み込んで数行記述するだけで美しいポリゴン状のアニメーションが表示されるようになります。

以下、デモになります。

Demo

上記デモはGeometryangleをデフォルトの状態で導入したものになります。ゆらゆらと変化するポリゴン状のアニメーションが美しいですね。マウスカーソルにも反応しますので、閲覧中の方も、おっ!なんだこれは!となること間違いなしです。

Geometryangleの使い方

プラグインのダウンロードは下記のリンクから行います。Gitからダウンロードすることができます。

https://github.com/TritonCode/Geometryangle

ダウンロードした「Geometryangle-master.zip」を展開してフォルダ内にある「geometyryangle.js」もしくは「geometryangle.min.js」をHTMLファイルに読み込みます。GeometryangleはjQueryのプラグインになりますので、jQueryも読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="geometryangle.min.js"></script>

上記のファイルを読み込み、下記スクリプトを追加します。セレクタにはポリゴン状のアニメーションを表示したい要素をセレクタに指定します。下記で「body」となっている箇所になります。

$(document).ready(function(){
  $('body').Geometryangle({mesh:{}, lights: [{}], line: {}, vertex: {}});
});

上記をまとめると下記のようになります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="geometryangle.min.js"></script>
$(document).ready(function(){
  $('body').Geometryangle({mesh:{}, lights: [{}], line: {}, vertex: {}});
});

最後にセレクタで指定した要素にスタイルを追記します。

body {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

固定表示にしたくない場合は下記のように修正しましょう。z-indexは他要素の重なり順によって修正していただければと思います

body {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

以上でデフォルトで設定されているポリゴン状のアニメーションが表示されます。

Geometryangleのオプション

下記のページにデモのリンクやドキュメントのリンクが載せてありますが、現在(2018年7月1日)は閲覧できないようです。

https://github.com/TritonCode/Geometryangle

なので、スクリプトの中身に設定されているデフォルト値を記載します。オプションは下記のように追加します。

$(document).ready(function(){
  $('body').Geometryangle({
    mesh:{
      //ここにmeshのプロパティを追加
    },
    lights: [{
      //ここにlightsのプロパティを追加
    }],
    line: {
      //ここにlineのプロパティを追加
    },
    vertex: {
      //ここにvertexのプロパティを追加
    }
  });
});

下記は「geometry.js」で設定されているデフォルト値になります。それぞれの値を変更してお好みのポリゴンアニメーションを作成しましょう!

mesh

width 1.2
height 1.2
depth 10
columns undefined
columns_auto true
rows undefined
rows_auto true
zoom 1
xRange 0.8
yRange 0.1
zRange 1.0
ambient ‘rgba(85, 85, 85, 1)’
diffuse ‘rgba(255, 255, 255, 1)’
background ‘rgb(255, 255, 255)’
speed 0.0002
fluctuationSpeed 0.5
fluctuationIntensity 0
floorPosition false
draw true

lights

count 1
xyScalar 1
zOffset 100
ambient ‘rgba(255,0,102, 1)’
diffuse ‘rgba(255,136,0, 1)’
speed 0.010
gravity 1200
dampening 0.95
minLimit 10
maxLimit null
minDistance 20
maxDistance 400
autopilot false
draw false

line

fill ‘rgba(0, 0, 0, 0)’
thickness 1
fluctuationIntensity 0
fluctuationSpeed 0.5
draw false

vertex

radius 0
fill ‘rgba(0, 0, 0, 0)’
fluctuationSpeed 0.5
fluctuationIntensity 0
strokeWidth 0
strokeColor ‘rgba(0, 0, 0, 0)’
draw false

以上、ポリゴン状のアニメーションを描画するGeometryangleの使い方のご紹介でした!