フェード・スライド・バウンド・フリップ・スターウォーズなど、CSS3アニメーションのコードを自動で生成するオンラインツール -liffect
Post on:2012年11月6日
リストで実装した複数の画像を24種類のかっこいいCSS3アニメーションで順番に表示するコードを1クリックで自動生成するオンラインツールを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012110601.png)
liffect - effect for lists
キャプチャは「Zoom In」、左上から順番にズームインします。
用意されているアニメーションは全部で24種類!
どれも使いたくなるようなかっこいいアニメーションです。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012110603.png)
アニメーションは全24種類
静止のキャプチャですが、いくつか紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012110602-01.png)
Slide Right: 画像が右側から次々に表示されます。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012110602-02.png)
Slide Top: 画像が上から次々に表示されます。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012110602-03.png)
Flip: 画像が大きく回転しながら次々に表示されます。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012110602-04.png)
Page Top: 上からページをめくるように次々に表示されます。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012110602-05.png)
Star Wars: スター・ウォーズのオープニングのように次々に表示されます。
それぞれのアニメーションのタイミングや画像の表示順番をランダムに変更することができます。
コードを生成するには、デモの下の「Generate」ボタンをクリックします。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012110604-01.png)
コード生成は「Generate」ボタンをクリック
すぐに、必要なコードが生成されます。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012110604-02.png)
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>
sponsors