HTML5/CSS3を使ったアニメーションを作成できるオーサリングツール「Sencha Animator」。本連載ではこれまでSencha Animatorに用意された基本図形や文字だけを使ってアニメーションを作成しましたが、実際には既存の写真やイラストなどの画像を組み合わせることが多いでしょう。そこで、今回は画像を使ってスライドアニメーションを作成します。また、画像がクリックされたら特定のページへ移動する方法も解説します。学習事項をまとめると以下のようになります。 画像の読み込みと配置 グループ化 フェードイン/フェードアウトの処理 クリック時の処理 テンプレートの追加 最初に、画像を1枚だけ読み込んだ状態でフェードイン/アウトする処理の設定方法を解説し、その後、複数の画像を読み込ませる方法、クリック時にページを移動させる処理について説明します。 画像の読み込みと配置 Sencha An
![もうFlashは要らない!?スマホ用CSS3アニメを作ろう (1/3)](https://cdn-ak-scissors.b.st-hatena.com/image/square/54529f84d660c0fac6daa49c5b38930b8378994c/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2009%2F08%2F25%2F243877%2Fl%2F3c3d9d8bde8ffeca.jpg)