iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法
    このエントリをはてなブックマークに登録

iPhoneはJavaScriptを使わなくても、CSSのみでアニメーションができるようです。
今回はその方法をご紹介します。

サンプルとして、ボタンを押すと赤い四角が右にツーっと動く、というものを例に解説しようと思います。


この赤い四角が


「move right」ボタンを押すことで、右にアニメーションします

 

サンプルのHTMLは次の通りです。

<html>
<head>
<meta name="viewport" content="width=320, user-scalable=no, maximum-scale=1.0" />
<style type="text/css">
.slide {
	-webkit-animation-name: "slide-right";
	-webkit-animation-duration: 2s;
}
@-webkit-keyframes "slide-right" {
	from { left: 10px; }
	to { left: 190px; }
}
</style>
<script type="text/javascript">
function slideStart() {
	document.getElementById("target").className = "slide";
	document.getElementById("target").style.left = '190px';
}
</script>
</head>
<body>
<input type="button" name="hoge" value="move right" onClick="slideStart();" />
<div id="target" style="width:120px; height:120px; background-color:red; position:absolute; top:120px; left:10px;"></div>
</body>
</html>

 

ポイントとなるのは「-webkit-animation-xxx」の部分です。

上記の例では、クラス名「slide」に対して、上記のようなアニメーションのような定義を書いています。

-webkit-animation-name: "slide-right";
-webkit-animation-duration: 2s;

1行目で名前を定義します、この名前は下と一致していれば適当なもので構いません。
2行目でアニメーションの速度を定義しています。
今回の例では2秒です。こちらの数字を少なくすれば早く移動することになります。

 

@-webkit-keyframes "slide-right" {
	from { left: 10px; }
	to { left: 190px; }
}

こちらの部分で、移動開始位置と終了位置を設定します。

以上でアニメーションの定義は終わりです。

 

あとはアニメーションさせたいオブジェクトのクラス名を「slide」とセットしてやれば、アニメーションが開始されます。

document.getElementById("target").className = "slide";

なお、上記でアニメーションは開始されるのですが、アニメーション終了後は元に位置に戻ってしまうので、その後に座標を終了位置に変更しています。

document.getElementById("target").style.left = '190px';

 

厳密にはアニメーションの発動時にJavaScriptを使ってしまっているので、タイトルの「CSSだけで」というのはちょっぴり嘘になりますが、まあ使わないでもできないことはないということでお許しください。

サンプルHTMLをアップしましたので、iPhoneをお持ちの方はこちらから実際にお試しください。
→ iPhone用 アニメーションのサンプル

 

このアニメーションのテクニックは、応用すれば次のようなflick動作などに使うことができます。

→ Ajaxian » iPhone Safari Flick Navigation By Example [ajaxian.com]

→ iPhoneから見れるflickのサンプル myDailyPhoto [mydailyphoto.com]

このようなインターフェイスは、なかなか便利そうです。
iPhoneをお持ちの方は試してみてはいかがでしょうか。

 

関連:


 

最近の記事







コメントを書く