このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/sketch.js"></script>
<script src="<PATH>/glassyWorms.min-0.0.2.js"></script>
<style>
	#glassyWormsDemo {
		display: none;
		position: fixed;
		z-index: 10001;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: #03091e;
	}
</style>

<script>
	$(window).load(function(){
		$('#glassyWormsDemo').glassyWorms({colors: ['#fff', '#c2c2c2'], useStyles: true});
	});
</script>

//オプション一覧
number numParticles — Nums of worms on element. Default: 250
number tailLength — Worm's tail length. Default: 12
number maxForce — Moving force. Default: 8
number friction — Frictions. Default: 0.75
number gravity — Gravity. Default: 9.81
number interval — Moving speed. Default: 3
array colors — Array of worm's colors. Default: ["#fff"]
HTML object element — Element for animating. Default: "<canvas class="worms"></canvas>"
string className — Classname of animating element. Replaces element option, complements id option
string id — ID of animating element. Replaces element option, complements className option
boolean useStyles — Flag for using default styles for animating element.
<button id="glassyWormsDemoBtn" class="red">ミミズる</button>

<div id="glassyWormsDemo"></div>

glassyWormsについて

GlassyWormsは、背景にミミズをはわせるプラグインです。
しかしそのエキセントリックなアニメーション効果でクールに仕上がっています。
ダウンロード こちら
ドキュメント こちら
デモ デモページはありません
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • HoverCaptions

    HoverCaptions

    HoverCaptionsは、Hover時に色々なパターンでキャプションを表示できる

  • LivingFade

    LivingFade

    指定要素をランダムにフェードイン、フェードアウト

  • FlightBoard

    FlightBoard

    空港の発着情報ボードのようにパラパラパラと文字を切り替える

  • Highlighter

    Highlighter

    指定要素のみをハイライト表示

  • FaviconNotifier

    FaviconNotifier

    ファビコンに数字を表示したり、変えたりすることができる