折り紙のような画面遷移アニメーションをするJavaScriptライブラリOriDomi.js

昔からあるみたいだけど、直近見つけて気に入っているJavaScript画面遷移用アニメーションに

OriDomi.js ( Githubは https://github.com/dmotz/oriDomi )

がある.最新の更新は半年前でここ3~5年間くらい大した更新はないみたいだけど、結構いい感じのアニメーションなのでメモ.

なんと手でもスライドできたりもするので、面白い.

スクリーンショット 2019-01-05 2.37.11.png

スクリーンショット 2019-01-05 2.37.29.png

本家のページにDemoが多いので参照.

使い方もめちゃくちゃ簡単.

  1. npm install oridomi . 使いたいファイルでoridomi.jsを読み込む.
  2. 以下でターゲットのDivを変換

var folded = new OriDomi(‘#paper’);
folded.foldUp(function(){alert(“done”);})

上記の操作によってidがpaperのdivを折りたたむアニメーションを開始して(foldUp)、
完了後に”done”というアラートを出すようになります.

すごい楽…
foldUpの引数は完了後のcallback関数を入力するだけです.

 

origamiとdomを掛け合わせてるんですかね.

About the author

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です