jQuery スクロールでURLを書き換える URLを書き換えるJSを、スクロールで移動したコンテンツの位置をトリガーに発動させるサンプルです。 記事などのコンテンツで、スクロールして下まで読み切ると、次の記事が表示されるサイトがあります。 今時は通信速度が速く、ついついたくさん読ませるための... 2019-07-29 20:32:02
VueJS タブ切り替え クリックしてコンテンツが切り替わる表現のサンプルです。 タブの表現はよく見かけるので、VueJSでもサンプルを実装してみました。 デフォルトは一番左のコンテンツが表示され、タブをクリックすると、コンテンツが入... 2019-07-28 16:08:19
VueJS クッキーの操作 Vue.jsを使ったソースでクッキーの操作を実装しました。 フォームで入力した値をクッキーに書き込みます。 その後、ページロードでも読み込みますが、読み込みボタン、削除ボタンを実装しました。... 2019-08-08 00:08:12
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