iOS / Android での Parallax スクロール
2,259 views
Skip to first unread message
Tsutomu Ogasawara
Aug 22, 2012, 2:47:24 AM8/22/12
to html5-dev...@googlegroups.com
小笠原です。こんにちは。
白石さんに直接聞けばいいのかもしれませんが、カンファレンス準備で
お忙しい気がするので、広く質問させてください。
CA Mobile のページ（http://www.camobile.com/）のような、
パララックスなスクロールをするモバイル向けページを検討しているの
ですが、iOS の Safari だと、フリックしてページスクロールした時に、
イベントが
（指を下ろす）
touchstart event
（指を動かす）
touchmove event
...
touchmove event
（指を上げる）
touchend event
（★慣性スクロール中→スクロール終了）
scroll event
というような感じで、慣性スクロール中にその中間状態（★）の座標を
取ることができません。また、setInterval() のコールバックも呼び出され
ないみたいです。CA Mobile のページでは、指を離して慣性スクロール
中であっても、アニメーションされています。
慣性スクロール中もアニメーションさせるために、その座標を取得する
方法ってあるのでしょうか？もしくは、touchend のタイミングで CSS
アニメーションを設定するようなやり方なのでしょうか？どなたか
ご存知でしたら教えてください。
それでは。
Shumpei Shiraishi
Aug 22, 2012, 3:34:35 AM8/22/12
to html5-dev...@googlegroups.com
白石です。
結局本人が答える(^^;
でも、MLに投稿してくださってありがとうございます。嬉しいです。
小笠原さんがおっしゃっているのって、通常のスクロールイベントでパララックスを実現しようとしているんですよね。
ぼくらの調査では、モバイルブラウザ上ではその方法じゃ無理でした。
なので、ぼくらはマウスホイールイベントやtouch系のイベントを自分で捕捉して、スクロール（のように見える）処理を自前で実装しています。
あれ、スクロールしているように見えますが、実はDOMアニメーションです。
例えば、タッチ系のイベントで20px指を移動されたら、内部的な仮想スクロール位置を20px移動させる。
そしてその後、そのスクロール位置にいる時のフレームを描画する、という手順です。
スムーズにアニメーションするように、いきなり20px先を描画するのではなく、10px->15px->18px->20pxというふうにフレームを刻んで描画しています。
アニメーションループはrequestAnimationFrame()で実装しています（未実装ブラウザのために、setTimeoutも併用しています）
いわば、アニメーションのタイムラインが、スクロール操作に同期しているようなイメージです。
これで少しは伝わるでしょうか？
よろしくお願いします。
# ちなみに、これらの処理を実装したフレームワークがあるんですが、ニーズがあればオープンソース化しようと思いつつ、ニーズが漏れ聞こえてこないのでそのまま放置状態です(^^;
2012年8月22日 15:47 Tsutomu Ogasawara <in...@ogaoga.org>:
> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/yuAI3PeE944J
> にアクセスしてください。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
> からこのグループにアクセスしてください。
結局本人が答える(^^;
でも、MLに投稿してくださってありがとうございます。嬉しいです。
小笠原さんがおっしゃっているのって、通常のスクロールイベントでパララックスを実現しようとしているんですよね。
ぼくらの調査では、モバイルブラウザ上ではその方法じゃ無理でした。
なので、ぼくらはマウスホイールイベントやtouch系のイベントを自分で捕捉して、スクロール（のように見える）処理を自前で実装しています。
あれ、スクロールしているように見えますが、実はDOMアニメーションです。
例えば、タッチ系のイベントで20px指を移動されたら、内部的な仮想スクロール位置を20px移動させる。
そしてその後、そのスクロール位置にいる時のフレームを描画する、という手順です。
スムーズにアニメーションするように、いきなり20px先を描画するのではなく、10px->15px->18px->20pxというふうにフレームを刻んで描画しています。
アニメーションループはrequestAnimationFrame()で実装しています（未実装ブラウザのために、setTimeoutも併用しています）
いわば、アニメーションのタイムラインが、スクロール操作に同期しているようなイメージです。
これで少しは伝わるでしょうか？
よろしくお願いします。
# ちなみに、これらの処理を実装したフレームワークがあるんですが、ニーズがあればオープンソース化しようと思いつつ、ニーズが漏れ聞こえてこないのでそのまま放置状態です(^^;
2012年8月22日 15:47 Tsutomu Ogasawara <in...@ogaoga.org>:
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/yuAI3PeE944J
> にアクセスしてください。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
> からこのグループにアクセスしてください。
Tsutomu Ogasawara
Aug 22, 2012, 3:46:59 AM8/22/12
to html5-dev...@googlegroups.com
小笠原です。こんにちは。
白石さん、お忙しいところありがとうございます！（逆に引っ張り出しちゃった感じですね。スミマセン...）
> これで少しは伝わるでしょうか？
はい、概念的なところは伝わりました。ただ、実装は大変そうですね...
> # ちなみに、これらの処理を実装したフレームワークがあるんですが、ニーズがあればオープンソース化しようと思いつつ、ニーズが漏れ聞こえてこないのでそのまま放置状態です(^^;
僕もいろいろ試してみたのですが、モバイルで動くものがなくて... ニーズは結構あるんじゃないかと思います。というか、僕も欲しいですｗ
それでは。
> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com
Fuyuko IKEGUCHI
Aug 22, 2012, 4:51:19 AM8/22/12
to html5-dev...@googlegroups.com
白石さん、小笠原さん
こんにちは。池口 芙有子（いけぐち・ふゆこ）と言います。
このディスカッションを拝読していたのですが、下記のニーズ、あると思います。
わたしも使いたいです。
>> ちなみに、これらの処理を実装したフレームワークがあるんですが、ニーズがあればオープンソース化しようと思いつつ、ニーズが漏れ聞こえてこないのでそのまま放置状態です(^^;
>
> 僕もいろいろ試してみたのですが、モバイルで動くものがなくて... ニーズは結構あるんじゃないかと思います。というか、僕も欲しいですｗ
途中から失礼しました。
ニーズのご連絡まで。
2012/8/22 Tsutomu Ogasawara <in...@ogaoga.org>:
>> > このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
>> > このグループから退会するには、html5-developer...@googlegroups.com
こんにちは。池口 芙有子（いけぐち・ふゆこ）と言います。
このディスカッションを拝読していたのですが、下記のニーズ、あると思います。
わたしも使いたいです。
>> ちなみに、これらの処理を実装したフレームワークがあるんですが、ニーズがあればオープンソース化しようと思いつつ、ニーズが漏れ聞こえてこないのでそのまま放置状態です(^^;
>
> 僕もいろいろ試してみたのですが、モバイルで動くものがなくて... ニーズは結構あるんじゃないかと思います。というか、僕も欲しいですｗ
ニーズのご連絡まで。
2012/8/22 Tsutomu Ogasawara <in...@ogaoga.org>:
>> > このグループから退会するには、html5-developer...@googlegroups.com
>> > にメールを送信してください。
>> > 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>> > からこのグループにアクセスしてください。
>
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/G6j2AEMSuekJ
>> > 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>> > からこのグループにアクセスしてください。
>
> にアクセスしてください。
>
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com
>
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com
Ryosuke Otsuya
Aug 22, 2012, 9:21:02 AM8/22/12
to html5-dev...@googlegroups.com
小笠原さん、皆さん
ぉぉっゃと申します。
最近、iOSのSafariでscrollイベントが発生しない現象に直面し、
回避策を考えた経験があります。
パララックススクロールを実装したわけではありませんが、
参考のため共有しますね。
ご存知かもしれませんが、iScroll ( http://cubiq.org/iscroll-4 ) という
ライブラリがあります。いろんな機能がありますが、いわゆる擬似
スクロールを実現することもできます。もちろん、慣性にも対応
しています。
擬似スクロールが発生するタイミングで、カスタムイベントを発火
させるように手を入れると、scrollイベントの代わりに使うことが
できました。
【iscroll.js】
(function(){
/* 略 */
iScroll.prototype = {
/* 略 */
_pos: function (x, y) {
/* 略 */
/* ここから */
var event = document.createEvent('Events');
event.initEvent('myscroll', true, true);
this.scroller.dispatchEvent(event);
/* ここまでを追加 */
},
/* 略 */
};
/* 略 */
})();
【HTML】
<div id="wrapper" style="position: absolute; top: 0; right: 0; bottom:
0; left: 0;">
<div id="scroller" style="height: 10000px;">
<!-- 略 -->
</div>
</div>
<script src="iscroll.js"></script>
<script>
var myScroll = new iScroll('wrapper');
document.getElementById('scroller').addEventListener('myscroll', function() {
var x = myScroll.x, y = myScroll.y;
console.log(x + ',' + y);
});
</script>
白石さんにフレームワークを公開していただけるとベストですが、
自前で書くよりはちょっとだけ楽に、パララックススクロールが
実現できると思います。
他にもいろんなやり方があるとは思いますが、参考になれば幸いです。
ぉぉっゃ
@rotsuya
2012年8月22日 17:51 Fuyuko IKEGUCHI <fuy...@vivresavie.net>:
ぉぉっゃと申します。
最近、iOSのSafariでscrollイベントが発生しない現象に直面し、
回避策を考えた経験があります。
パララックススクロールを実装したわけではありませんが、
参考のため共有しますね。
ご存知かもしれませんが、iScroll ( http://cubiq.org/iscroll-4 ) という
ライブラリがあります。いろんな機能がありますが、いわゆる擬似
スクロールを実現することもできます。もちろん、慣性にも対応
しています。
擬似スクロールが発生するタイミングで、カスタムイベントを発火
させるように手を入れると、scrollイベントの代わりに使うことが
できました。
【iscroll.js】
(function(){
/* 略 */
iScroll.prototype = {
/* 略 */
_pos: function (x, y) {
/* 略 */
/* ここから */
var event = document.createEvent('Events');
event.initEvent('myscroll', true, true);
this.scroller.dispatchEvent(event);
/* ここまでを追加 */
},
/* 略 */
};
/* 略 */
})();
【HTML】
<div id="wrapper" style="position: absolute; top: 0; right: 0; bottom:
0; left: 0;">
<div id="scroller" style="height: 10000px;">
<!-- 略 -->
</div>
</div>
<script src="iscroll.js"></script>
<script>
var myScroll = new iScroll('wrapper');
document.getElementById('scroller').addEventListener('myscroll', function() {
var x = myScroll.x, y = myScroll.y;
console.log(x + ',' + y);
});
</script>
白石さんにフレームワークを公開していただけるとベストですが、
自前で書くよりはちょっとだけ楽に、パララックススクロールが
実現できると思います。
他にもいろんなやり方があるとは思いますが、参考になれば幸いです。
ぉぉっゃ
@rotsuya
2012年8月22日 17:51 Fuyuko IKEGUCHI <fuy...@vivresavie.net>:
Wataru Kanzaki
Aug 22, 2012, 12:01:03 PM8/22/12
to html5-dev...@googlegroups.com
神崎渉瑠です。
position:fixed、スクロールのエミュレーターで有名なので、iScrollというのがあります。
OSごとに異なるスクロール量の違いも考えて作られているそうで、
違和感無く操作できるようです。
http://cubiq.org/iscroll-4
position:fixedをエミュレートしている部分をゆっくり移動させれば、視差が出るのではないでしょうか。
ご参考まで。
-----
Wicker-Wings
http://www.wi-wi.jp/
神崎渉瑠
position:fixed、スクロールのエミュレーターで有名なので、iScrollというのがあります。
OSごとに異なるスクロール量の違いも考えて作られているそうで、
違和感無く操作できるようです。
http://cubiq.org/iscroll-4
position:fixedをエミュレートしている部分をゆっくり移動させれば、視差が出るのではないでしょうか。
ご参考まで。
-----
Wicker-Wings
http://www.wi-wi.jp/
神崎渉瑠
Tsutomu Ogasawara
Aug 22, 2012, 10:09:02 PM8/22/12
to html5-dev...@googlegroups.com
小笠原です。こんにちは。
それでは。
>>>> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
>>>> このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com
>>>> にメールを送信してください。
>>>> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>>>> からこのグループにアクセスしてください。
>>
>> --
>> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
>> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/G6j2AEMSuekJ
>> にアクセスしてください。
>>
>> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
>> このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com
>> にメールを送信してください。
>> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>> からこのグループにアクセスしてください。
>
> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
>
Shumpei Shiraishi
Aug 23, 2012, 5:25:08 AM8/23/12
to html5-dev...@googlegroups.com
白石です。
こちら、レスを忘れていました。
リクエストも頂いたし、ぼくらのフレームワーク、公開できるように動いてみますね。
ただ、シーエー・モバイルさんの資産ではありますので、公開できなかったらごめんなさい。
よろしくお願いします。
2012年8月23日 11:09 Tsutomu Ogasawara <off...@ogaoga.org>:
>> >>>> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
>> >>>> このグループから退会するには、html5-developer...@googlegroups.com
>> >> このグループから退会するには、html5-developer...@googlegroups.com
>> > このグループから退会するには、html5-developer...@googlegroups.com
こちら、レスを忘れていました。
リクエストも頂いたし、ぼくらのフレームワーク、公開できるように動いてみますね。
ただ、シーエー・モバイルさんの資産ではありますので、公開できなかったらごめんなさい。
よろしくお願いします。
2012年8月23日 11:09 Tsutomu Ogasawara <off...@ogaoga.org>:
>> >>>> このグループから退会するには、html5-developer...@googlegroups.com
>> >>>> にメールを送信してください。
>> >>>> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>> >>>> からこのグループにアクセスしてください。
>> >>
>> >> --
>> >> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
>> >>
>> >> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/G6j2AEMSuekJ
>> >> にアクセスしてください。
>> >>
>> >> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
>> >>>> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>> >>>> からこのグループにアクセスしてください。
>> >>
>> >> --
>> >> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
>> >>
>> >> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/G6j2AEMSuekJ
>> >> にアクセスしてください。
>> >>
>> >> このグループから退会するには、html5-developer...@googlegroups.com
>> >> にメールを送信してください。
>> >> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>> >> からこのグループにアクセスしてください。
>> >
>> > --
>> > このメールは Google グループのグループ「html5j.org」の登録者に送られています。
>> > このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
>> >> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>> >> からこのグループにアクセスしてください。
>> >
>> > --
>> > このメールは Google グループのグループ「html5j.org」の登録者に送られています。
>> > このグループから退会するには、html5-developer...@googlegroups.com
>> > にメールを送信してください。
>> > 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>> > からこのグループにアクセスしてください。
>> >
>>
> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/TvRkgurWE7oJ
>> > 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>> > からこのグループにアクセスしてください。
>> >
>>
> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> にアクセスしてください。
>
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com
>
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com
Tsutomu Ogasawara
Aug 23, 2012, 6:25:17 AM8/23/12
to html5-dev...@googlegroups.com
小笠原です。こんにちは。
> リクエストも頂いたし、ぼくらのフレームワーク、公開できるように動いてみますね。
> ただ、シーエー・モバイルさんの資産ではありますので、公開できなかったらごめんなさい。
> ただ、シーエー・モバイルさんの資産ではありますので、公開できなかったらごめんなさい。
おお！白石さん、お忙しいのにもかかわらず、ありがとうございます！
もし公開されたら使わせていただきます！
それでは。
>> >>>> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
>> >>>> このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com
>> >>>> にメールを送信してください。
>> >>>> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>> >>>> からこのグループにアクセスしてください。
>> >>
>> >> --
>> >> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
>> >>
>> >> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/G6j2AEMSuekJ
>> >> にアクセスしてください。
>> >>
>> >> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
>> >> このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com
>> >> にメールを送信してください。
>> >> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>> >> からこのグループにアクセスしてください。
>> >
>> > --
>> > このメールは Google グループのグループ「html5j.org」の登録者に送られています。
>> > このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
>> > このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com
>> > にメールを送信してください。
>> > 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
>> > からこのグループにアクセスしてください。
>> >
>>
> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/TvRkgurWE7oJ
> にアクセスしてください。
>
> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developers-jp+unsubscribe@googlegroups.com
Reply all
Reply to author
Forward
0 new messages