サイト構築 -JavaScript
ネタバレのテキストを非表示にする、美しいパーティクルアニメーションを備えた高速で軽量なコンポーネント -spoilerjs
Post on:2025年12月10日
ネタバレのテキストをTelegram風のパーティクルアニメーションを備えたエフェクトで非表示にし、クリックするとそのテキストが表示されるJavaScriptで実装された軽量のWebコンポーネントを紹介します。 依存関係は […]
ユーザーのマウスやキーボードの動き（運動量や方向）から次にどの要素を操作するか予測するスクリプト -ForesightJS
Post on:2025年7月15日
ユーザーがWebサイトにアクセスした際、マウスやキーボードの動きをから次にどの要素を操作するか予測し、プリフェッチすることができるJavaScriptのライブラリを紹介します。 1ヵ月ほど前に紹介したForesightJ […]
マウスやキーボードの動きからユーザーが次にどの要素を操作するかを予測するスクリプト -ForesightJS
Post on:2025年6月4日
通常のホバーエフェクトのトリガーは、要素にカーソルをホバーした後に開始されます。しかし、これはユーザーの操作（ボタンに移動）から実際のホバーイベントまで100-200ms遅れます。また、キーボード操作によるトリガーも同様 […]
わずか数行のコードで1つの要素を別の要素にスムーズに遷移させる、フレームワークに依存しないJavaScript -Blendy
Post on:2025年2月19日
数行のコードと外部スクリプトを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptを紹介します。 フレームワークやライブラリなど他のスクリプトに依存することなく、単体で動作し、もちろん他のフレー […]
日時範囲の書式をWebサイトやスマホアプリのUIで読みやすく、理解しやすくするフォーマッタ -little-date
Post on:2025年1月22日
WebサイトやスマホアプリのUIで日にちや時間、年の範囲の書式を自動的に短く、読みやすく、理解しやすく表示するJavaScriptのライブラリを紹介します。 このライブラリを使用すれば、シンプルで一貫性のある書式で表示で […]
コピペするだけで使用できる！ ページ上のアクティブなアニメーションを取得するシンプルなJavaScript
Post on:2025年1月16日
ページ上で動作するアクティブなビュー遷移にリンクされたすべてのアニメーションを取得するJavaScriptのコードを紹介します。 数行のコードをコピペするだけで使用でき、アニメーションを反転させたり、継続時間を変更したり […]
便利なJavaScriptライブラリが登場！ CSSのプロパティの値の変更を検出できる -CSSStyleObserver
Post on:2024年10月8日
DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。 最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値 […]
これで簡単に実装できる！ カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するスクリプト -Swapy
Post on:2024年9月26日
数行のコードを記述するだけで、カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するJavaScriptを紹介します。 他のフレームワークやライブラリへの依存はありません。また、ReactやVueやSve […]
たった5分で分かる！ Reactのコンセプトや用語をやさしく解説
Post on:2024年9月25日
Reactは、WebサイトやスマホアプリのUIを構築する人気が高いJavaScriptのライブラリです。再利用可能なコンポーネントを作成し、複雑なUIでも効率的に管理できるようにすることで、フロントエンドの開発に革命をも […]
これでSafariにも実装できる！ スクロールをトリガーにしたアニメーションのポリフィル -Scroll-timeline Polyfill
Post on:2023年9月5日
先日の記事で、CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法を紹介しました。Chrome 115から実装された新機能ですが、ネック […]
sponsors
