JS 数字のカウントアップ演出 数字を指定した数まで足して、積み上がっていく表現をJavaScriptで実装するサンプルです。 今回はライブラリを使って数字をカウントアップさせます。 金額や点数を演出するときなどに使えそうです。 ここでは最低限のオプションだけ実装しています... 2019-08-04 00:05:58
JS 時間取得と加工 JavaScriptではいろんな時間の情報を使えるよう整っています。改めて整理してみました。 まずはどんな時間を扱うことが多いのか。 年月日の形式ではなくて、時差について二つだけ。 協定世界時(UTC) Mon, 20 May 2019 09:33:22 GMT... 2019-08-08 00:30:38
JS ESモジュールを使ったDOM操作 ES Modulesの仕様で書いたクラスを付けするだけのシンプルなサンプルです。 2017年からES6 Modules、ES Modules、またはESMと呼ばれるJavaScriptを外部参照する際の新しい仕様が広まってきました。 まだ筆者も勉強中ですが、簡単に説明... 2019-08-08 00:18:15
JS 文字列一致 if文で文字列の部分一致を判定して出しわける構文のサンプル。 よく使うけど、忘れがちなので備忘録です。 正規表現の文字列一致 [[ ua = navigator.userAgent; if(ua.match(/chrome/)) { conso... 2019-08-07 23:05:10
JS 感圧で遊ぶ iPhone6s以上限定ですが、押し込んで面白い表現を作ってみようと思います。 タッチ3Dの押し込まれた値によってどんなことができるか検証します。 この記事はiPhone6s以上で閲覧をお願いします。 #press_area3{ width:200px; hei... 2019-08-07 22:47:03
JS 感圧の検証 この記事はiPhone6s以上で使える3Dタッチ(感圧)についての検証です。 iPhone6s以上だと画面を強く押すと圧力を感知して、タップとは違う挙動になります。 その挙動に対してJSによる感圧を取得する関数でトリガーを実装すると、どう... 2019-08-07 22:43:16
JS 元画像のサイズと表示画像のサイズ サイト上で画像を小さく表示することはよくありますが、表示されている縦横のサイズはよく使うのですが、たまに元の画像のサイズを使いたい時があります。 そんな時は以下のようなJavaScriptで元の画像のサイズを取得することができます。 [[<img id="neko" src="/img/demo/cat/002.jpg"... 2019-08-07 22:34:44
JS タップ圧力(感圧)検知 スマホやタブレットなどでは、タップした圧力を検知し、操作するシーンが増えてきました。JavaScriptで圧力を数値化する関数が用意されているので、実装してみました。 画面をグッと押し込むと発動するサンプルです。 このサンプルはスマホやタブレットなどのタップの圧力を検知できる端末で参照してください。 #press... 2019-07-29 21:46:07
JS URLのハッシュ値をUIに活用する URLの最後に#をつけて文字列をつけるとページ内のIDのまでページ内で移動します。一瞬で移動せずにスクロールとアコーディオンを組み合わせたUIのサンプルです。 ページ内からのリンクはaタグで書くだけ。 クリックすると、アコーディオンで隠れているコンテンツのところまで、スクロールし、コンテンツを表示します。... 2019-08-07 22:06:43
JS 加速度検知 スマホを振ったときにJavaScriptで仕掛けを作りたいときのサンプルです。 このサンプルではiOS、Androidのブラウザで、スマホを握って振ったときに、文字が切り替わるスクリプトを実装しています。 function ClickRequestDeviceSen... 2019-07-29 21:35:59