フェード・スライド・バウンド・フリップ・スターウォーズなど、CSS3アニメーションのコードを自動で生成するオンラインツール -liffect

リストで実装した複数の画像を24種類のかっこいいCSS3アニメーションで順番に表示するコードを1クリックで自動生成するオンラインツールを紹介します。

liffect - effect for lists
キャプチャは「Zoom In」、左上から順番にズームインします。

用意されているアニメーションは全部で24種類！
どれも使いたくなるようなかっこいいアニメーションです。

アニメーションは全24種類

静止のキャプチャですが、いくつか紹介します。

Slide Right: 画像が右側から次々に表示されます。

Slide Top: 画像が上から次々に表示されます。

Flip: 画像が大きく回転しながら次々に表示されます。

Page Top: 上からページをめくるように次々に表示されます。

Star Wars: スター・ウォーズのオープニングのように次々に表示されます。

それぞれのアニメーションのタイミングや画像の表示順番をランダムに変更することができます。

コードを生成するには、デモの下の「Generate」ボタンをクリックします。

コード生成は「Generate」ボタンをクリック

すぐに、必要なコードが生成されます。

HTMLは必要な画像分だけli要素を増やします。CSSはアニメーションのみのコードです。
JavaScriptはjquery.jsや当スクリプトを外部ファイルとして記述して利用します。

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/prism.js"></script>
<script type="text/javascript" src="js/liffect.js"></script>