Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

jquery.Photostack.jsを作りました.

写真をランダムな角度で重ねて、クリックすると順番を入れ替えるシンプルなjQueryプラグインを作りました。下のデモをご覧ください。
写真をクリックすると順番が入れ替わると思います。

使い方(例)

下記のソースのようにjquery.Photostack.cssおよび、jquery.Photostack.jsを読み込んでください。

<link rel="stylesheet" href="jquery.Photostack.css">
<script src="jquery.Photostack.js"></script>

その後、下のソースのように記述します。この際オプションはあってもなくても大丈夫です。

$(".photostack").Photostack({
    	top:40,
    	left:500,
    	degFrom:-20,
    	degTo:20
});

オプション

  • topアニメーション時の下方向への移動量
  • leftアニメーション時の左方向への移動量
  • degFrom写真を配置する角度の乱数の下限
  • degTo写真を配置する角度の乱数の上限

Github

Githubで公開していますので、是非ご利用下さい。



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド