JavaScript

AOSを使用して要素をふわっと出現させるアニメーションはよく使用されます。タイミングを遅らせたいときにはdata-aos-delay属性を使いますが、ランダムに出現させたい時、AOSにはそのようなオプションが用意されてい […]

スクロールしたときにスライダーを動かす記事は多いけど、リサイズのことも考えたり面倒。いい方法ないかな？ しんぺー IntersectionObserverを使えばリサイズの心配は不要です。サンプルコードはコピペで使えるよ […]

タブの中にslickを入れているけど、切り替えたときに表示が崩れたりする。。なぜ？ しんぺー タブを切り替えたときにslickを初期化してあげるとうまくいきますよ。解説していきますね。 サンプル 不具合のサンプルと、修正 […]

モーダル内に動画を設置したけど、開いたときに自動で再生させたい。あと、一度再生するとモーダルを閉じてもずっと動画再生されてる。バックグラウンドで音だけ聞こえてる、、なんとかして。 しんぺー モーダルを開いたり閉じたりした […]

リッチテキストをコピーできるボタン作ってって言われたけど、そんなん実装してるの見たこと無い。できないでしょ。。 しんぺー ぼくも出来ないだろうな〜と思いながら調べたらできるみたいです。あまりサンプルや記事も少く実装するの […]

IntersectionObserverって使いたくても記述長くて面倒。。 しんぺー 使いやすい雛形を共有しますね。 完成形のイメージ スクロールして見出しが表示されると、文字がランダムに表示されるようにしています。今回 […]

Reactで同じような処理をオプショナルチェーンで記述しているものと、AND演算子で記述しているものがありました。どちらが良いのでしょうか？ オプショナルチェイニング プロパティやメソッドが存在しない場合に、エラーになら […]

キーイベントの動作確認用です。どうぞ。 試すと面白いこと 1,2,3と一文字ずつ入力してみる 長押ししてみる コピーしたテキストを貼り付けてみる 入力した文字を一文字ずつ消していく 上記を日本語入力で試してみる See […]

JavaScriptのclassListで古いクラスから新しいクラスに変えるのなんだっけ？古い方先に書くんだっけ？たしかJavaScriptの書籍に書いて。。。ない。前調べたけど簡単だからって油断してメモも残してない。。 […]

プログレスバーを実装するのに、ProgressBar.jsを使ったけど、Barが角丸にできなかったり使い勝手わるいなぁ。シンプルなデザインだし自分で作れないかな？ 　しんぺー 簡単につくれますよ。使いまわしやすいテンプレ […]