- jQuery 上部スクロールでローディングアニメ
- スマホで最上部までスクロールし、さらに引っ張ると更新されたり、データが読み込まれたりするUIがよくあります。 そのサンプルを作ってみました。 スマホ...
- 2020-08-11 23:50:19
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
スマホならでは
スマートフォン独特の表現、操作の一覧です。
「スマホならでは」に関するサンプル
- JS カメラの映像を表示させる
- カメラの映像をブラウザに表示させるサンプルです。 このサンプルではパソコンやスマホの画面側についているカメラの映像を取得して、ブラウザに表示します。 以下のボタンを押すとブラウザがカメラにアクセスし...
- 2020-02-11 22:38:25
- JS ブラウザでQRコード読み込み
- ブラウザのページのボタンからカメラを起動し、ページに戻ってQRコードから取得した値を表示するサンプルです。 近年QRコードはだいぶ広まってきました。 URLを筆頭に長い文字や数字を打ち込むのが面倒なときの入力補助ツールになっています。 そこで今回はブラウザか...
- 2020-02-04 21:28:21
- CSS デバイスの高さまで縦を広げる
- CSSのvhの単位を使ってデバイスやブラウザの高さを要素にセットするサンプルです。 100vhを指定するとデバイスの縦幅いっぱいの高さとなります。 以下の親要素（破線の部分）の高さは300pxを指定しています。 height:100%; height...
- 2019-12-01 16:00:37
- CSS デバイスの横のサイズを扱う
- CSSのvwを使ってデバイスのサイズをデザインで扱うサンプルです。 viewportが「width=device-width」のとき、デバイスの横幅のサイズはユーザの端末次第となります。 その設定の場合、横幅をデザインで扱いたい時vwという単位...
- 2019-11-16 12:53:42
- JS タップ圧力（感圧）検知
- スマホやタブレットなどでは、タップした圧力を検知し、操作するシーンが増えてきました。JavaScriptで圧力を数値化する関数が用意されているので、実装してみました。 画面をグッと押し込むと発動するサンプルです。 このサンプルはスマホやタブレットなどのタップの圧力を検知できる端末で参照してください。 #press...
- 2019-07-29 21:46:07
- JS 加速度検知
- スマホを振ったときにJavaScriptで仕掛けを作りたいときのサンプルです。 このサンプルではiOS、Androidのブラウザで、スマホを握って振ったときに、文字が切り替わるスクリプトを実装しています。 function ClickRequestDeviceSen...
- 2019-07-29 21:35:59
- JS 傾き検知
- スマホにはほとんど傾きを検知するセンサーが内蔵されており、その値を利用できます。 スマホのみ下記の画像が３次元にひねり動きます。 まず、特定の方向にスマホを向けて、平らにすると初期値になります。 そこから、縦に起こす数値、横にひ...
- 2019-08-07 21:27:06
- JS 緯度経度を取得する
- JavaScriptを使って現在の位置(GPS)情報を取得します。 下記のボタンを押すと、ブラウザの機能として、位置情報の取得の可否確認が起動します。 許可をすると緯度、経度、それと誤差の範囲をメートル単位で表示しま...
- 2019-08-07 21:19:04
- JS バイブレーション
- 現在はまだAndroidのみですが、バイブレーションをJSで発火させることができます。 スマホには大抵バイブレーションの機能がついています。 OSがAndroidの場合、以下のJavaScriptで簡単に発動できます。 $(document).ready(function() {...
- 2019-07-28 17:08:52
Top