PWA ホーム画面に追加するボタン プログレッシブウェブアプリケーションが徐々にブラウザでサポートされ始めました。その機能を使ってアプリのようにホーム画面に追加することができるようになったので、実装してみました。 2018年2月頃からGoogle Chromeのアップデートの中でウェブサイトがアプリライクな機能を実装できるようになるPWAといういろんな機能が徐々にサポートされてきま... 2019-08-03 23:12:02
jQuery 自動ドア風アニメーション 画像や文字などを隠しておいて、クリックで表示させるサンプルです。 まずは、シンプルに表示させるパターンです。 toggle fadeToggle slideToggle トグルは表示、非表示。フェードは徐々に透明度で変化。ス... 2019-07-29 07:56:24
CSS 左右に行き来するアニメーション 車、電車などホームページでちょっとした演出を施したいときのサンプルです。 CSSのアニメーションを利用して、画像を左右に行き来させています。 画像を変えればいろんなものに応用ができます。 一部jQueryを使ってますが、ほぼCSSの... 2019-07-28 14:44:36
jQuery 消去法のUI 一覧になっている要素をユーザの操作で削除するUIのサンプルです。 ニュースやECなど閲覧の傾向からレコメンドされることはありますが、私はそのおすすめが気に入らないことがよくあります。 裏でいろいろな仕組みが動いて、最... 2019-08-07 23:58:46
jQuery タブ(横)シンプル版 過去に作ったタブのサンプルから、コードをよりシンプルに改変しました。 スタンダードなタブメニューですが、作るとなると意外と面倒です。 でもプラグインを使うほどでもないので、以下のソースをコピペでお使いください。... 2019-08-03 23:07:51
jQuery 要素をタグで囲う 作った要素を、後から別のdivタグで囲みたいとき、wrapメソッドを使って囲うサンプルです。 下記のサンプルは、クリックすると、クリックされた要素の外側がdivで囲まれ、影のスタイルが当たります。 クリックするたびに、div要素が二重、三重になって... 2019-08-07 23:53:39
jQuery スライドスイッチ スマホの設定などでよく見かけるスライドしてスイッチをON/OFFするUIのサンプルです。 右にスライドするとON、左に戻すとOFFになるデザインをCSSだけで形と動きを実装しています。 以下のスワイプではなく、スイッチ全体をタップするだけで、切り... 2019-08-03 23:00:36
jQuery クラスで一括操作 クラスが付いている要素にだけ処理を実行したい場合のよく使うメソッドです。 filterとhasClassのメソッドのサンプルの二つを用意しました。 実行している内容はほぼ同じです。 まずはfilterメソッドを使った場合... 2019-08-07 23:45:03
jQuery 透明度を変更する 画像や要素の透明度を指定の値にフェードイン、フェードアウトするサンプルです。 ボタンを押すと10段階で画像の透明度が上がり、画像が消えて行きます。 fadeOutメソッドを使うと一発で消えてしまうので、少しずつ透明度をコントロールす... 2019-08-03 22:56:20
jQuery コンテンツの選択と変更 jQueryのcontentsメソッドの活用サンプルです。 特定の要素の中の子要素に対して、一斉に変更などの処理を行いとき、contentsメソッドが便利です。 言葉で説明するのも難しいので以下のサンプルをご参照くだ... 2019-08-07 23:40:57