横方向へ動く

テキストも一緒に

 

縦方向へ動く

テキストも一緒に

 

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

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>oridomi.min.js"></script>
<script>
	$(window).load(function(){
		var _oriDomiDemo01 = new OriDomi('#oriDomiDemo01', {
			vPanels: 5,
			ripple: true
		});
		var _oriDomiDemo02 = new OriDomi('#oriDomiDemo02', {
			hPanels: 5,
			ripple: true
		});
			
		var _methods = ['accordion', 'stairs', 'curl', 'reveal', 'foldUp', 'ramp', 'twist', 'fracture'];
		$('#oriDomi button').on('click', function(){
			var angle, el, method, n;
			var $this = $(this).prev();
		
			method = _methods[Math.abs(Math.floor(Math.random() * _methods.length - Math.random()))];
			angle = Math.floor(Math.random() * 80 * (Math.random() > .5 ? -1 : 1));
			method !== 'foldUp' ? angle : void 0;
			
			if (method === 'foldUp') {
				angle = '';
			}
			
			eval("_" + $this.attr('id') + "." + method + "(" + angle + ")");
			
			$(this).next().html('アクション: <span class="value">' + method + '</span> ' + '   アングル: <span class="value">' + angle + '</span>');
		});
			
		setTimeout(function(){
			_oriDomiDemo01.accordion(30);
			_oriDomiDemo02.reveal(30, 'top');
		}, 1000);
	});
</script>

//オプション一覧
vPanels:         5,     // number of panels when folding left or right (vertically oriented)
hPanels:         3,     // number of panels when folding top or bottom
speed:           1200,  // folding duration in ms
ripple:          2,     // backwards ripple effect when animating
shadingIntesity: .5,    // lessen the shading effect
perspective:     800,   // smaller values exaggerate 3D distortion
maxAngle:        40,    // keep the user's folds within a range of -40 to 40 degrees
shading:         'soft' // change the shading type


//エフェクト一覧
'accordion', 'stairs', 'curl', 'reveal', 'foldUp', 'ramp', 'twist', 'fracture'
<div class="oriDomi-box">
	<p class="title">横方向へ動く</p>
	<div id="oriDomiDemo01" class="oriDomi-demo">
		<p>テキストも一緒に</p>
	</div>
	<button class="yellow">別のアクションを見る</button>
	<p class="current"> </p>
</div>

<div class="oriDomi-box">
	<p class="title">縦方向へ動く</p>
	<div id="oriDomiDemo02" class="oriDomi-demo">
		<p>テキストも一緒に</p>
	</div>
	<button class="yellow">別のアクションを見る</button>
	<p class="current"> </p>
</div>

oriDomiについて

oriDomiは、画像に折り目のついた紙のような動きを与えるプラグインです。
マウス操作だけでなくタッチ操作にも対応できるようです。
エフェクトも複数用意されているので、なかなかおもしろいことができそうなプラグインです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • transit

    transit

    animateメソッドを使うように手軽にcss3のtransitionアニメーションなどが使える

  • Circulate

    Circulate

    Circulateは、要素をサークル状に回転させることができる

  • Sticker

    Sticker

    Stickerは、壁に貼ったステッカーを剥がすような動きを表現できる

  • color

    color

    jQueryのanimateメソッドでは実現できない色のアニメーションを可能にする

  • gridly

    gridly

    要素を格子状に配置し、それを移動させることができる