WEBOPIXEL

マウスの動きに追従してぐにょぐにょするjQueryプラグイン「jquery.morphing.js」

Posted: 2014.07.11 / Category: javascript / Tag: 

「jquery.morphing.js」は画像などを丸くしてマウスポインターの動きに追従してぐにょぐにょ(?)することができるjQueryプラグインです。

Sponsored Link

demo

ダウンロード

プラグインはGitHubで公開されています。

ANTON072/jquery.morphing.js

使い方

リンク先はデモも用意されていたり日本語だったりなので、そちらを見てもらった方が確実だと思いますが。。

html

	<div class="js-morphing">
	  <img src="img/01.jpg" alt="">
	</div>
	

JavaScript

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="../jquery.morphing.js"></script>
	<script>
	$(function(){
		$('.js-morphing').morphing({
			numVert: 6, //円の粒度
			spring: 0.005,  //バネ運動の動作数値
			friction: 0.90, //摩擦運動の動作数値
			radius: 80, //Canvasの表示半径
			fps: 45
		});
	});
	</script>
	

オプションもいろいろ設定できるようです。
Canvasを使用しているのでブラウザはhtml5対応以上ですね。
なかなか面白いですね。