jQuery アンド条件で要素を表示する タグのようにいくつかのキーワードが紐づく要素があり、それぞれ複数のタグを持つ可能性があるとき、ボタンを複数選択することで絞り込むUIのサンプルです。 例えばボタンが5つあり、要素が8こあるとします。 ボタンを押すと、押したキーワードに紐づく要素だけが表示されるようにします。 複数のキーワードを... 2023-11-29 23:04:02
jQuery ローカルでリンク集 ただのリンク集のHTMLですが、JSの配列を読み込むように作られたシンプルに整形したサンプルです。 業務用PCなどでウェブサービスの利用に制限がある時、あるいは自分用のリンクメモだからネットにあげたくないような時、ローカルでリンク集を作ることがよくあり... 2022-06-12 22:35:43
CSS 背景が波打つボタン ボタンのエフェクトとして、文字の背景の色のついた部分が上下にアニメーションするサンプルです。 ボタンを押した時、何かがアクティブになる状態を表す一つの方法として、ちょっとしたアニメーションを使いたい時があります。 ボタンの背景にGifアニメを置... 2021-02-23 13:43:13
jQuery 自動ドア風アニメーション 画像や文字などを隠しておいて、クリックで表示させるサンプルです。 まずは、シンプルに表示させるパターンです。 toggle fadeToggle slideToggle トグルは表示、非表示。フェードは徐々に透明度で変化。ス... 2019-07-29 07:56:24
jQuery スライドスイッチ スマホの設定などでよく見かけるスライドしてスイッチをON/OFFするUIのサンプルです。 右にスライドするとON、左に戻すとOFFになるデザインをCSSだけで形と動きを実装しています。 以下のスワイプではなく、スイッチ全体をタップするだけで、切り... 2019-08-03 23:00:36
jQuery メニューのトグルボタン スマホの左上や右上によく見かけるメニューボタンのサンプルです。 ハンバーガーメニューとも言われますが、そのボタンを押すとクローズボタンに切り替わりま... 2019-07-29 06:29:24