このページの本文へ

Yahoo! UI Library 3で驚きのアニメーションを作成 (1/5)

2009年10月20日 11時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「古籏一浩のJavaScriptラボ」の第16回です。過去の記事も合わせてご覧ください。

YUI 3

YUI 3のアニメーション機能を使ってみよう

 9月末にリリースされた「YUI(Yahoo! UI Library)」の最新版「YUI 3」。前回はYUI 3の基本的な使い方と簡単なマウスオーバーのサンプルを作りました。今回はYUI 3のアニメーション機能を使って、Webページに動きを付ける方法を紹介します。

●YUI 3入門のラインナップ

fig1-1.png

YUI2のアニメーション解説ページ


 YUI 3には派手なアニメーション機能こそありませんが、前バージョンのYUI 2と同様、UIで使うための基本的な機能が備わっています。記述方法はYUI 2と似ており、設定できるプロパティ名もほとんど同じです。実際にいくつかサンプルを作りながら、アニメーション機能を使ってみましょう。

fig1-2.png

YUI3のアニメーション解説ページ。YUI2とプロパティ名は似ているが若干書き方が変わっている

今回作成するサンプルの最終完成版。上から画像が降ってきて元の表示位置に配置される

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く