昔からあるみたいだけど、直近見つけて気に入っているJavaScript画面遷移用アニメーションに
OriDomi.js ( Githubは https://github.com/dmotz/oriDomi )
がある.最新の更新は半年前でここ3~5年間くらい大した更新はないみたいだけど、結構いい感じのアニメーションなのでメモ.
なんと手でもスライドできたりもするので、面白い.
本家のページにDemoが多いので参照.
使い方もめちゃくちゃ簡単.
- npm install oridomi . 使いたいファイルでoridomi.jsを読み込む.
- 以下でターゲットのDivを変換
var folded = new OriDomi(‘#paper’);
folded.foldUp(function(){alert(“done”);})
上記の操作によってidがpaperのdivを折りたたむアニメーションを開始して(foldUp)、
完了後に”done”というアラートを出すようになります.
すごい楽…
foldUpの引数は完了後のcallback関数を入力するだけです.
origamiとdomを掛け合わせてるんですかね.