「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
setPointerCapture()でdocumentでonmousemoveしなくて済む（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 15日目） | Ginpen.com
ちなみにそれぞれ gotpointercapture と lostpointercapture イベントが発火します。 何が嬉しいか mousemove イベントを使って自前でドラッグを作ってみると直面すると思うんですが、このイベントって対象要素上でマウスカーソルを動かしたときにだけ反応しますね。 経験ない人からすると何当たり前のこと言ってんだって感じだと思うんですけど、こんなときに困るんです。 マウスカーソルを素早く操作して対象要素の外へ出てしまう デザインの都合上、重なり手前に表示される要素がある デモで右端を掴んで右側へドラッグしてみてください。たぶん止まります。カーソルを戻して、ゆっくり、はみ出ないよう少しずつ動かすとドラッグできます。 対処としては対象要素じゃなくて document の方で mousemove を見張るって感じでしょうか。直感的ではありませんし、開放処理の漏れと
touch-actionでスクロールやズームを止める（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 12日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 12 日目 今日は CSS の touch-action プロパティです。指操作の制御をします。 touch-action – CSS: カスケーディングスタイルシート | MDN デモ：https://codepen.io/ginpei/pen/gOGLrgG デモはタッチ対応端末でご覧ください。主にスマホ。 基本的な使い方 だいたいこんな値です。 auto – 通常 none – 反応しない pan-y – 縦方向スクロールのみ pinch-zoom – ズームのみ manipulation – スクロールとズームのみ（ダブルタップでの拡大を無効化） 他に下方向のみの pan-down とかいくつかあるので MDN をご覧ください。 Pointer Events 関係の仕様です。IE でも動きます。 使いどころ
これなら簡単！フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリ -Flicking
フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリを紹介します。スマホのフリック操作だけでなく、デスクトップのクリックやドラッグ操作にも対応しています。 シンプルなHTMLで簡単に実装でき、Vue、React、Angularもサポート、単体でも動作するJavaScriptです。 Flicking Flicking -GitHub Flickingの特徴 Flickingのデモ Flickingの使い方 Flickingの特徴 Flickingはその名の通り、フリック操作に対応したスライダー・カルーセルを簡単に実装できるJavaScriptライブラリです。新しくなったFlicking 3はフレキシブルで、さまざまな拡張機能を備えており、無限フリック・フリースクロール・スナップ・バウンドをはじめ、異なるサイズのパネル、静止位置のカスタマイズなどもできます。
【javaScript】でスクロールを禁止にする（PC、スマホ対応） | とんプログラミング
そこで今回は、スマホでもスクロール（タッチ操作）禁止にする方法を紹介します。 スマホの場合は、cssではなくjavaScriptでの実装が必要です。 以下のソースのno_scroll()を初期化処理などで呼び出せば、PC、スマホでスクロールができなくなります。 スクロール禁止を解除したい場合は「return_scroll()」を呼び出せばOKです。 [index.js] // スクロール禁止 function no_scroll() { // PCでのスクロール禁止 document.addEventListener("mousewheel", scroll_control, { passive: false }); // スマホでのタッチ操作でのスクロール禁止 document.addEventListener("touchmove", scroll_control, { passive
タッチデバイスにも対応可能な、リストのアイテムを並べ替えたりスワイプで削除できるようにするライブラリ・「Slip.js」
Slip.jsはリストのアイテムの並べ替えやスワイプによる消去を可能とする非依存のシンプルなライブラリです。タッチデバイスにも対応可能となっています。機能もいたってシンプルで、並べ替え、並べ替えの禁止、スワイプの禁止などをオプションで設定可能です。導入も楽で良いですね。ライセンスファイルはありませんでしたが、スクリプトファイル内を見る限りはBSDっぽいです。 Slip.js
タップ計測よりも正確！Googleアナリティクスで電話コンバージョンを分析する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGのマーケティング担当のまこりーぬです。 突然ですが、みなさんはGoogleアナリティクスを日頃どう活用していますか？ 私は普段、簡単にチャネル別の反響分析を行うために、Googleアナリティクスを使って、主にLIGブログのPV・コンバージョン数、参照元などを確認しています。多くの方が私と同じような使い方をしているのではないでしょうか？ ▲参考画像 しかし！ Googleアナリティクスの使い方は、ほかにもたくさんあるんです。例えば、電話コンバージョンの計測。実はGoogleアナリティクスの管理画面上で、電話からの問い合わせも計測できるんです。ご存知でしたか？ 電話での問い合わせってWebからの問い合わせより確度が高いのに、意外と多くの人が無関心だったりするんですよね。 せっかくGoogleアナリティクスを使っているのなら、あわせて電話コンバージョンも分析して、しっかりと施策
Beer Slider Responsive & Accessible Before-After Slider
Recently, I was working on a project where we needed an efficient solution to demonstrate some Lightroom presets applied to the photos. A before-after slider seemed to be a good solution here. Finally, I decided to code such a slider myself. That’s how Beer Slider was born. It’s written in vanilla JavaScript, but it can be easily implemented by those of you who are more comfortable with jQuery or
Pressure.js - JavaScriptで3D Touch/Force Touchのイベント管理 MOONGIFT
iPhone6では3D Touchという機能が追加され、さらに新しいMacBookなどでもForce Touchと呼ばれる感圧タッチパッドが採用されています。これにより、単純なクリックに奥行きを持たせることができるようになっています。 そこで紹介したいのがPressure.jsです。Webブラウザ上でForce Touchや3D Touchを感知できるJavaScriptライブラリです。 Pressure.jsの使い方 実際に使っているところです。押し込むようにクリックすることで画像のぼかしが解除されます。 こちらもぐっと押し込んだ場合だけ出てくるツールチップです。 対応機種が限られるので実用的かと言われると難しいところですが、どれくらい深く押し込んでいるかが数値として取得できるのは面白いです。Pressure.jsの面白い使い方を考えてみてください。 Pressure.jsはHTML5/
Hammer.jsを使って簡単にタッチジェスチャーを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 毎朝寒さで布団からなかなか抜け出せません、エンジニアのゆたろです。 みなさん、スマホのタッチジェスチャーの実装につまずいたことはありませんか？ 今回は、そんなときに便利なライブラリ「Hammer.js」をご紹介します。 hammer.jsを使ってみよう http://hammerjs.github.io/ まずは、上のリンクよりプラグインをダウンロードしちゃいましょう！ https://github.com/hammerjs/jquery.hammer.js ここではjQqueryプラグインとして使いたいので、jquery.hammer.jsも合わせてダウンロードしてください。 ダウンロードしたファイルとjQueryをHTMLに読みこませます。 <script src="jquery.js"></script> <script src="hammer.js"></script
15 Free Gesture Icon Sets for Mobile App Designers
Gesture icons represent the many touch-enabled interactions that users perform on digital devices, typically mobile. They’re used in UI design to provide a visual cue for actions such as swiping, pinching, tapping, or rotating. They are generally simple, minimal, and designed so that users of all levels can easily understand them. Many mobile developers use gesture icon sets, or interaction icons,
[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js
スマホアプリやWebアプリのプロトタイプやデモの操作を見せる時などに、スマホでのタップやデスクトップでのクリックを表現する波紋のアニメーションを簡単に実装できるスクリプトを紹介します。 ランディングページや使い方ページでこういうのよく見かけますね。 TouchPoint.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="touchpoint.min.js"></script> </body> Step 2: JavaScript タッチポイントの対象にしたいDOM要素を指定して、スクリプトを実行します。 プロトタイプであれば、「window」でいいでしょう。 <script> TouchPoint.init(window); </script> エレメントを指定したり、波紋のカラーや
![[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/46be404c8d2f64ff7f9750d80ed6af78be5437ce/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080501.gif)
[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js
オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。 実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。 「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="iconate.min.css"> </head> <body> ... コンテンツ ... <script type="text/javascript" src="iconate.min.js"> </body> Step 2: HTML アイコンを配置します。 デモではFont Awesomeのアイ
![[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e52b762682773fbeb81c27963f72395fbbf5fea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015052611.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhoneの文字入力スピードが「5倍以上」になる14のテクニック（All About） - Yahoo!ニュース
任意の要素をドラッグ移動出来るようにする軽量スクリプト・「dragmove.js」)
Noodel.js - ダイナミックなコンテンツをスムーズに閲覧 MOONGIFT)
tragopan - 別ライブラリへの依存性のないズーム/パン用JavaScriptライブラリ MOONGIFT
long-press - Webブラウザでロングタップイベントを実現
11 Free Mobile Gesture Icons Packs (PSD, AI, EPS)