skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

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

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

sponsors

使用方法
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">
<amp-img src="画像パス" alt="" />
<amp-img src="画像パス" alt="" />
<amp-img src="画像パス" alt="" />
<amp-img src="画像パス" alt="" />
</div>

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

sponsors

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

記事作成:
記事URL:

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

前の記事:
次の記事:Widgetboxで手軽にRSS型ウィジェット(ガジェット)を作る

あなたにはこちもお勧め!

jQuery プラグインまとめ!

JavaScript

read more

Column

read more