画像に歪んだ形のマスクをかけられるJavaScript「MASKEW」
JavaScriptライブラリのMaskewを利用すれば、簡単に歪んだ感じのマスクを掛けられるようになり、画像を一風変わった形で表示できます。
sponsors
使用方法
Maskewからファイルをダウンロード。
jQueryを使用するとエレメントの指定が楽なので、こちらも読み込みます。
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="maskew.js"></script>
<script type="text/javascript">
$(function() {
var $maskew = $('#id名').maskew(15); //数字は角度
});
</script>
次に表示させたい場所に上記のidを記述。
<p id="id名"></p>
最後にマスク対象の画像をCSS側に書きます。
#id名{
width: 245px;
height: 245px;
background:url(画像パス);
}
画像とCSSの高さ・幅を一緒にしても構いませんし、下記サンプルのように画像を繰り返しても面白くなりそうです。
画像に歪んだ形のマスクをかけられるJavaScript「MASKEW」サンプル
sponsors
記事作成:2013年3月26日 09:50
記事URL:http://www.skuare.net/2013/03/javascriptmaskew.html
TOP > javascript > 画像関連 > 画像に歪んだ形のマスクをかけられるJavaScript「MASKEW」
前の記事:意外に便利!?画像をグリッドに綺麗に散りばめてくれるjQueryプラグイン「Photoset Grid」
次の記事:殺風景な入力フォームを彩るファンシーなjQueryプラグイン「fancyInput」
あなたにはこちもお勧め!
jQuery プラグインまとめ!