usako1124のブックマーク - はてなブックマーク

クリックで波紋を出すエフェクト（Ripple Effect）実装メモ - Qiita
javascript エフェクト要素をクリックした座標を中心とした位置に移動させます。エフェクトのアニメーション自体はcssで表現しています。エフェクトを発動させるためのclassを付け替えます。 $(function() { var $clickable = $('.ripple'); /* mousedownだと直ぐに発動し、clickだとマウスボタンを離した時に発動する */ $clickable.on('mousedown', function(e) { var _self = this; var x = e.offsetX; var y = e.offsetY; var $effect = $(_self).find('.ripple__effect'); var w = $effect.width(); var h = $effect.height(); /* クリックした
usako1124 2022/10/03
css

javascript
リンク
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています目次処理の順番を意識する $.ajax()の省略メソッドを知るイベントを知るデバッグ方法を知る通信状況を想定する（タイムアウトを設定する）連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思いますしかし単純にそのまま書いただけでは処理
usako1124 2021/05/27
jQuery
リンク
SVGをcss/jsで操作するときに知っておきたいこと - Qiita
はじめに ※SVG初心者向きの記事です SVGはスケーラブルでベクターなグラフィックスです。レスポンシブや高解像度ディスプレイに対応する時にはとても頼もしい存在です。htmlと同じようにcssやjsでの制御も可能なため、インタラクティブなコンテンツもお手の物です。そんなSVGは表示だけであれば簡単ですが、cssやjsを利用する際には知っておきたい基本知識があります。これ以上、私のように時間を浪費してしまう哀れな子鳥たちを増やさぬようメモしたいと思います。ｱｰﾒﾝ目次表示のさせかたに気をつけろ！ cssに気をつけろ！ fill: none;に気をつけろ！ viewBoxに気をつけろ！ jQueryに気をつけろ！サーバーの設定に気をつけろ！表示のさせかたに気をつけろ！ SVGの表示方法は複数あります。 <img>のsrcでファイルを読み込む background-imageプロパテ
usako1124 2017/03/31
svg
リンク
jQueryを利用したDOM操作要素の追加メソッドまとめ - Qiita
はじめに jQueryでの要素追加メソッドをよく忘れるので、それのメモです。似たような記事はもう沢山あると思いますが、すぐに思い出せるようコードベースで動きを確認できるようにしています。言葉での説明はあえて省きます。Don't think feel ! なお実際の動作は↓で確認ができます http://nekoneko-wanwan.github.io/demo/jquery/dom/ とりあげるメソッド append() appendTo() prepend() prependTo() after() insertAfter() before() insertBefore() wrap() wrapInner() wrapAll()
usako1124 2016/12/16
jquery
リンク
1