JS URLのハッシュ値をUIに活用する URLの最後に#をつけて文字列をつけるとページ内のIDのまでページ内で移動します。一瞬で移動せずにスクロールとアコーディオンを組み合わせたUIのサンプルです。 ページ内からのリンクはaタグで書くだけ。 クリックすると、アコーディオンで隠れているコンテンツのところまで、スクロールし、コンテンツを表示します。... 2019-08-07 22:06:43
jQuery 画像読み込んでから発火 重い画像を読み込んだ後に表示します。 大きな画像や画質の高い画像は読み込みに若干時間がかかります。 読み込み中にJSが発火してしまうと、画面がガタついたり、予期せぬ動きをしてしまったりしま... 2019-08-07 21:46:57
jQueryとCSS カードをクリックでめくる表現 jQueryとCSSのアニメーションを使って、カードをクリックすると画像がめくれる表現のサンプルです。 以前カードをめくるような表現のサンプルを記載しましたが、改善版です。 要素をコピペで量産、順番を変えてもJSの修正は不要のため、編集が楽になりました。... 2019-07-28 04:58:36
CSS3 画像を左右に回転する 要素をCSSのアニメを使い、左右にかしげるような表現のサンプルです。 CSS3で手軽にアニメーションが使えるようになり、回転とループアニメを組み合わせると下記のような動きをつけることができます。 左右に回転するアニメーショ... 2019-07-29 06:53:21
jQuery スクロールでクラス付加、解除 スクロールするとクラスを追加して、変化させるサンプルです。 要素がブラウザの中央付近になったときに、エフェクトがかかるデザインをよく見かけるようになりました。 このサンプルでは、特定クラスで囲った要素までスク... 2019-07-28 17:14:04
jQuery マウスのトリガーいろいろ マウスの動きで発動させる場合によく使われる記述を一部列挙しておきます。 クリックしたら、何かが起こる仕掛けはよく使われますが、ダブルクリックや右クリック(=コンテクストメニュー)でも発動させることが可能です。 マウスの場... 2019-07-29 21:39:13
JS 加速度検知 スマホを振ったときにJavaScriptで仕掛けを作りたいときのサンプルです。 このサンプルではiOS、Androidのブラウザで、スマホを握って振ったときに、文字が切り替わるスクリプトを実装しています。 function ClickRequestDeviceSen... 2019-07-29 21:35:59
JS 傾き検知 スマホにはほとんど傾きを検知するセンサーが内蔵されており、その値を利用できます。 スマホのみ下記の画像が3次元にひねり動きます。 まず、特定の方向にスマホを向けて、平らにすると初期値になります。 そこから、縦に起こす数値、横にひ... 2019-08-07 21:27:06
JS idやclassの値取得 JavaScriptで特定のidやclassの要素を指定し、そのタグ内の値の取得や出力をします。 読めばわかるものの、使わなければ忘れがちな値の取得と出力です。 classの場合は「getElementsByClassName」 idの場合は「getElementById」 idは一つ... 2019-08-03 12:36:14
JS 緯度経度を取得する JavaScriptを使って現在の位置(GPS)情報を取得します。 下記のボタンを押すと、ブラウザの機能として、位置情報の取得の可否確認が起動します。 許可をすると緯度、経度、それと誤差の範囲をメートル単位で表示しま... 2019-08-07 21:19:04