フリック動作でページ遷移させる | nagachan.net
スマートフォン等で、左右フリックでページ移動させてみました。 フリックのイベントが取得できれば、簡単です。 [デモページ] ※スマートフォンでご覧ください。下のQRコードからも移動できます。 フリックと言っても「フリックした」というイベントはなく、 画面をタッチした タッチしたまま指を動かした 画面から指を離した という3つのイベントにわかれていて、それぞれのイベント発生時に処理を行うようにします。 動作の概要 画面を左右にフリックして、次のページが存在していたら移動します。 フリック時にコンテンツも指に追随してスライドし、一定の移動距離以下であれば元の位置に戻ります。 JavaScriptファイルは共通化したいので、HTMLファイルに移動先のURLが入った変数を用意しました。変数が存在していれば、フリックの反応とページ遷移を行います。 JavaScript ※jQueryを
[iphone/safari] JavascriptとCSSアニメーションでフリック操作を実装してみる 続きの続き : nogunogu
こんにちは。のぐちです。 さて、ここまで続けて、需要があるのかどうかさっぱり分かりませんが、 今回はいよいよCSSアニメーションを使ってフリックを表現します。 早速ソースを並べて解説をしていきます。 まずは前回までのものからHTMLを少し変更しました。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>flick</title> <meta name="viewport" content="width=device-width, maximum-scale=0.6667" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
