サイトに紙を折ったような効果を付加「oriDomi」
当ページのリンクには広告が含まれています。
スポンサーリンク
サイトに紙を折ったような効果を加えるプラグイン「oriDomi」を紹介します。
jQueryプラグイン「oriDomi」
DOM（Document Object Model）に折り紙のような効果を、ということで「origami + dom」 → 「origamidom」 → 「oriDomi」というプラグイン名になったのかな？
このプラグインを使えば、指定した要素がぐにゅぐにゅと屏風のように折れ曲がった効果を加えることができます。オプションでは、折れ曲がるアニメーションスピード、折れ曲がり方などさまざまな効果を指定できます。スゴイ！
スポンサーリンク
デモでは、背景を屏風のように折り曲げてみました。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OriDomi - jQueryプラグイン</title>
<style>
.demo {
background-color: #eee;
height: 400px;
}
</style>
</head>
<body>
<h1>OriDomiのデモでーす。</h1>
<div class="demo">
<p>指定した要素がぐにゅぐにゅと屏風のように折り曲がります。</p>
<p>すごいねー</p>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="oridomi.js"></script>
<script>
$(document).ready(function(){
var $folded = $('.demo').oriDomi({
vPanels: 12,
speed: 2000,
ripple: 2,
shadingIntesity: .5
});
$folded.oriDomi('accordion', 20);
});
</script>
</body>
</html>
jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» oriDomi
スポンサーリンク