ブラインド効果付きの画像スライドショー「Blindify」
当ページのリンクには広告が含まれています。
スポンサーリンク
ブラインド効果付きの画像スライドショーを実装するプラグイン「Blindify」を紹介します。
jQueryプラグイン「Blindify」
このプラグインを使えば、ブラインド効果付きの（ブラインド越しに画像をみるような）画像スライドショーが作成できます。横方向・縦方向のブラインド効果に加え、動きの制御もできるので、おもしろい効果をサイト上に実現できます。
スポンサーリンク
デモでは、単色の画像に縦方向のブラインド効果を付けています。それではどうぞ。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blindify - jQueryプラグインまとめのカルマ</title>
<link rel="stylesheet" href="blindify.min.css" media="all" />
<style>
body {
background-color: #000;
color: #fff;
}
div {
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Blindifyのデモでーす。</h1>
<div id="blindify">
<ul>
<li><img src="img/1.png" alt="" /></li>
<li><img src="img/2.png" alt="" /></li>
<li><img src="img/3.png" alt="" /></li>
<li><img src="img/4.png" alt="" /></li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.blindify.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#blindify').blindify();
});
</script>
</body>
</html>
jsファイルのダウンロードはこちらからどうぞ。
» Blindify
スポンサーリンク