定番
新着

JavaScript


  • JS タップ圧力(感圧)検知
  • スマホやタブレットなどでは、タップした圧力を検知し、操作するシーンが増えてきました。JavaScriptで圧力を数値化する関数が用意されているので、実装してみました。画面をグッと押し込むと発動するサンプルです。 このサンプルはスマホやタブレットなどのタップの圧力を検知できる端末で参照してください。 #press_area{ width:100px; height:100px; background-color:red; color:#FFF; line-height:50px; text-align:center; use
  • 2018-08-09 19:09:19
  • JS テキストエリア文字挿入
  • textareaタグ内でカーソルを合わせ、ボタンを押すと特定の文字が入るサンプルです。テキストの入力で定型文を使うときに、パソコンの予測変換などを使いますが、同じように入力を手助けする機能の一案を紹介します。 挨拶や署名などがよくありますが、入力が煩わしい文字や、忘れやすいタグなどに重宝します。 このエリアをクリックして、カーソルを移動してください。 下のボタンを押すと、指定した文字列が、カーソルの位置に挿入されます。 改行タグ 改行タグ(改行
  • 2018-06-24 04:31:14
  • JS URLのハッシュ値をUIに活用する
  • URLの最後に#をつけて文字列をつけるとページ内のIDのまでページ内で移動します。その用途を利用してスクロールとアコーディオンを組み合わせたUIのサンプルです。ページ内からのリンクはaタグで書くだけ。 クリックすると、アコーディオンで隠れているコンテンツのところまで、スクロールし、コンテンツを表示します。 直接#をつけてリンクされても正常に動きます。 上下にはわかりやすいよう、青と赤の要素を配置しています。 $(function(){ var myhash = location.hash; var top_m
  • 2018-06-20 12:38:31
  • jQuery 画像読み込んでから発火
  • 重い画像を読み込んだ後に表示します。大きな画像や画質の高い画像は読み込みに若干時間がかかります。 読み込み中にJSが発火してしまうと、画面がガタついたり、予期せぬ動きをしてしまったりします。 単純に画像の読み込みを待ってからJSを発火させるという回避策を紹介します。 以下はページ表示時に画像の読み込みを開始し、終わると画像を表示するボタンを表示します。 $(function() { for (var i
  • 2018-06-20 12:37:26
  • jQueryとCSS カードをクリックでめくる表現
  • jQueryとCSSのアニメーションを使って、カードをクリックすると画像がめくれる表現のサンプルです。以前カードをめくるような表現のサンプルを記載しましたが、改善版です。 要素をコピペで量産、順番を変えてもJSの修正は不要のため、編集が楽になりました。 カードの裏側が先に読み込まれ、表示されないようにしました。 下の画像をクリックしてください。 $(window).load(function(){ $(".i2").each(function (i) {
  • 2018-06-11 22:24:12
  • jQuery スクロールでクラス付加、解除
  • スクロールするとクラスを追加して、変化させるサンプルです。要素がブラウザの中央付近になったときに、エフェクトがかかるデザインをよく見かけるようになりました。 このサンプルでは、特定クラスで囲った要素までスクロールで移動したとき、画面中央を過ぎると新たなクラス当たるよう実装しました。 クラスによりCSSアニメを実装したり、応用できると思います。 また、中央を超えるとクラスが付きっぱなしパターンと、スクロールを戻すと元に戻るパターンの2つ用
  • 2018-06-05 23:27:35
  • jQuery マウスのトリガーいろいろ
  • マウスの動きで発動させる場合によく使われる記述を一部列挙しておきます。クリックしたら、何かが起こる仕掛けはよく使われますが、ダブルクリックや右クリック(=コンテクストメニュー)でも発動させることが可能です。 マウスの場合、クリックは基本的に押して、離してから発動しますが、押された瞬間も検知可能です。 カーソルが要素の上を通過することも検知できます。 応用すると、押されて、動いて、離すと、マウスは「ドラッグ」、スマホだと「スワイプ」や「フリック」とな
  • 2018-06-03 22:33:34

© 2018 kipure
Top