Allied ArchitectsAllied ArchitectsEngineer Blog

iPhone向けWEBアプリでCSS3を使って滑らかに画面を切り替える

2012/08/23 言語

こんにちは、アライドアーキテクツ長野です。

iPhone向けのWEBアプリを作っていると、滑らかに画面の切り替えがしたくなりますよね!
でもそのためにわざわざライブラリを使いたくない、、ということはよくあると思います。

そこでJavascriptとCSS3だけで滑らかな画面の切り替えをする方法を調べましたので、今回はそれについて書いてみます。

いきなりですが、サンプルです。(iPhoneでみてください)
ボタンを押すと徐々に次のページに切り替わります。

以下にJavascriptのソースを抜粋しました。HTML部分などはサンプルのソースをご覧ください。

アニメーションに関わる部分のみ解説します。
事前処理(①)

切り替え後のページの透明度を0にしておきます。

アニメーション処理(②)

ここで実際にアニメーションをしています。
”-webkit-transition: opacity .5s ease-in-out”
というスタイルをセットしていますが、
これは
・どれくらい時間を掛けるか
・何を対象にするか
・どのような進行割合でアニメーションするか
を定義しています。事前にCSSに書いておくこともできます。

ここでは0.5秒の間に透過度を’ease-in-out'(ゆっくりはじまり、ゆっくり終わる)の進行割合で遷移するよう定義しています。ほかにもlinear等が使えます。
そしてその直後で
“opacity:0”
とセットしており、先にセットされた-webkit-transitionの定義にそってopacityが0になります。

このアニメーションを
・firstは徐々に透過させる
・secondは徐々に表示させる
ことで滑らかに切り替わっているように見せています。

今回は透過による遷移ですが、画面を横にずらす遷移などもできそうですね。

nagano
  • nagano
  • Webエンジニア
  • サービス開発や社内インフラ等を担当しています。 このブログではJavaScript周りのネタを中心に書いていきたいです。

RELATION ENTRY

Unityを触ってみる3

Unityを触ってみる3

2017/10/11 未分類

はじめに こんにちは。プロダクト開発部兼UGC事業部の長野です。 気づけば3年半振りの投稿です。 本業ではphpやJavaScriptを触っていますが、このブログでは引き続きunityネタで行きます。 今回はunityに今流行のDeepLearningを組み合わせたlisというものを使ってみます...

続きを読む

Unity 4.3を触ってみる2

Unity 4.3を触ってみる2

2014/05/8 JavaScript

こんにちは。システム部の長野です。 今回も前回に引き続きUnityネタで行きます。 今流行の鳥を飛ばして障害物を避けていく某人気ゲームのようなものを作ってみました。 (既に出尽くした感満載ですが、、) サンプル ※閲覧するにはUnity Web Playerのインストー...

続きを読む

naganoの記事一覧へ

ページTOPへ