Warning: Invalid argument supplied for foreach() in /home/kipure/ki_box/resource/kp/kp_resource.php on line 67
キプレ | 使えるUIサンプルギャラリー kipure
定番
新着

新着記事一覧

2ページ目  11~20
  • jQuery スクロールでクラス付加、解除
  • スクロールするとクラスを追加して、変化させるサンプルです。要素がブラウザの中央付近になったときに、エフェクトがかかるデザインをよく見かけるようになりました。 このサンプルでは、特定クラスで囲った要素までスクロールで移動したとき、画面中央を過ぎると新たなクラス当たるよう実装しました。 クラスによりCSSアニメを実装したり、応用できると思います。 また、中央を超えるとクラスが付きっぱなしパターンと、スクロールを戻すと元に戻るパターンの2つ用
  • 2018-06-05 23:27:35
  • jQuery マウスのトリガーいろいろ
  • マウスの動きで発動させる場合によく使われる記述を一部列挙しておきます。クリックしたら、何かが起こる仕掛けはよく使われますが、ダブルクリックや右クリック(=コンテクストメニュー)でも発動させることが可能です。 マウスの場合、クリックは基本的に押して、離してから発動しますが、押された瞬間も検知可能です。 カーソルが要素の上を通過することも検知できます。 応用すると、押されて、動いて、離すと、マウスは「ドラッグ」、スマホだと「スワイプ」や「フリック」とな
  • 2018-06-03 22:33:34
  • JS 傾き検知
  • スマホにはほとんど傾きを検知するセンサーが内蔵されており、その値を利用できます。スマホのみ下記の画像が3次元にひねり動きます。 まず、特定の方向にスマホを向けて、平らにすると初期値になります。 そこから、縦に起こす数値、横にひねる数値、横に傾ける数値を表示します。 さらに、「方角」では「0」を「北」とする数値を出すことも可能です。 window.addEventListener("deviceorientation", device
  • 2018-05-20 22:41:00
  • JS 緯度経度を取得する
  • JavaScriptを使って現在の位置情報を取得します。下記のボタンを押すと、ブラウザの機能として、位置情報の取得の可否確認が起動します。 許可をすると緯度、経度、それと誤差の範囲をメートル単位で表示します。 地図などのAPIに連携するときに、取得して連携する値です。 ※このスクリプトは、https通信でないと、実行されません。 エラーになる場合は、こちらをお試しください。→サンプルページ $(docume
  • 2018-05-13 22:30:38
  • jQuery クラスをSVGタグに追加、変更
  • SVGタグにaddClassするとクラスが追加されないときの対応です。SVGタグにクラス操作しようとすると反映しない場合ときがあります。 そのときは以下の内容を確認してみましょう。 $('svg').addClass('クラス名'); 現状上記の記述だと何も起こらないことがあります。 代案として以下の属性の操作の記述が手っ取り早いです。 $('svg').attr("class", "クラス名")
  • 2018-04-30 10:27:20
  • JS CSV読み込みjQueryで表示
  • CSVを読み込み、jQueryで出力するサンプルです。HTML5のFile APIを使ってローカルのCSVファイルを取り込み、加工できる状態にするスクリプトです。 下記のようなカンマ区切りのファイルをローカルに置き、ボタンを押して読み込んでください。 A,B,C 1000,2000,3000 (拡張子は.csvでお願いします。) ボタンとエラーなどの情報を出力するHTMLを配置します。 <
  • 2018-04-08 17:45:28
  • JS クリックでコピー
  • ボタンをクリックするとテキストなどをコピーするJSのサンプルです。jQueryのプラグイン「clipboard.js」を使うと、どこかをクリックすることで、クリップボードにコピーすることができます。 コピーが成功したらイベントを動かすサンプルも用意しました。 このサンプルは、jQueryとclipboard.jsの読み込みが必要です。 $(function() { var c1 = new Clipboard('.btn
  • 2018-04-01 22:53:28

© 2018 kipure
Top