Allied ArchitectsAllied ArchitectsEngineer Blog

iPhone SafariでTimeScape風の動きを出してみる

2012/11/30 JavaScript

開発本部の長野です。
moniplaFBの開発や社内インフラ運用などをやっています。

前回はCSS3&JavaScriptを使って画面遷移について書かせてもらいました。あれから3ヶ月経ってiOS6もリリースされ、CSS3周りがさらに強化されたようです。

というわけで今回も引き続きCSS3&JavaScriptネタで行きます。
iPhone Safari上でXperiaのTimeScape風の動きを出してみたいと思います。

※iOS6から使えるようになった「requestAnimationFrame」を使っています。
そのためiOS6以上のiPhoneでないと動きません。m(_ _)m
また、iPhone向けのサンプルがあるのでiPhoneをお持ちの方はぜひiPhoneで御覧ください。

1.縦軸の移動

まずは土台から、ということで指の動きに合わせて上下にスクロールするリストを作りました。

sample1(短縮URL : http://p.tl/fXzA-)

移動はtranslate3Dを使ってY軸(縦の軸)だけ移動させています。

2.拡大縮小

次に遠近感を出すために拡大縮小処理を入れます。

sample2(短縮URL : http://p.tl/PV9v-)

拡大縮小処理はscale3dという関数を使います。

※細かい計算式の説明は割愛します。

3.左右のゆれと回転

次に左右のゆれとカードの回転処理を入れます。

sample3(短縮URL : http://p.tl/rKMR-)

左右の揺れは先程もでてきたtranslate3dのX軸を変えることで表現します。回転はrotate3dという関数でZ軸を中心に回転させています。これでかなりそれっぽくなりますね!

4.透過

次に透過処理を入れます。

sample4(短縮URL : http://p.tl/HN_u-)

透過処理はopacityという値を変えることで変更できますが、これもiOS6から新しく使えるようになった「-webkit-filter」というプロパティを使っています。

5.X軸回転

最後ににX軸の回転を少し入れます。

sample5(短縮URL : http://p.tl/hFVi-)

これは先程も出てきたrotate3dのX軸をかえます。(第一引数がX軸になっています。)

(ぱっと見あまり変わった感じはしませんが、微妙にカードが上を向くようになります。)

以上で完成です!他にもblurやgrayscaleなんかも使えるようで、益々flashに近づいている気がします。

最後にアライドアーキテクツでは、一緒に働いてくれるエンジニアを募集中です。
興味がある方は、こちらの採用サイトからご応募ください。

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へ