奥から手前にズームするJavaScript「Spacegallery.js」

最近はappleのcoverflowやらamazonのぐるぐるやら画像の見せ方が豊富になってきました。
今回紹介する「Spacegallery.js」はありそうでなかった、手法かもしれません。
奥から手前にずんずんとズームしながら画像を表示していきます。

使用方法
Spacegallery.jsのDownLoadからファイル一式をダウンロードします。
あとは以下を記載します。
<link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/spacegallery.js"></script>
<script>
$(document).ready(function(){
$('#myGallery').spacegallery({loadingClass: 'loading'});
});
</script>

※spacegallery.cssはcustom.cssと合わせてしまっています。
後はズームさせたい画像は以下のように指定します。
<div id="myGallery" class="spacegallery">
<img src="画像パス" alt="" />
<img src="画像パス" alt="" />
<img src="画像パス" alt="" />
<img src="画像パス" alt="" />
</div>

奥から手前にズームするJavaScript「Spacegallery.js」サンプル

sponsors

「奥から手前にズームするJavaScript「Spacegallery.js」」をシェアする

記事作成:
記事URL:

TOP > > > 奥から手前にズームするJavaScript「Spacegallery.js」