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
jQuery クラスをSVGタグに追加、変更 SVGタグにaddClassするとクラスが追加されないときの対応です。 SVGタグにクラス操作しようとすると反映しない場合ときがあります。 そのときは以下の内容を確認してみましょう。 [[$('svg').addClass('クラス名');]]... 2019-08-07 21:15:52
JS バイブレーション 現在はまだAndroidのみですが、バイブレーションをJSで発火させることができます。 スマホには大抵バイブレーションの機能がついています。 OSがAndroidの場合、以下のJavaScriptで簡単に発動できます。 $(document).ready(function() {... 2019-07-28 17:08:52