JavaScriptのIntersectionObserverでスクロールインしたら縦書きのテキストをタイピング風で表示
縦書きのテキストを、ネイティブなJavaScriptを使い「タイピング風」に一文字ずつ表示させてみます。 「端的で、メッセージ性の強いクリエイティブに使える」スニペットなので、引き出しの一つにでもなるよう参考にしてみてく …
プラグイン無しでお気に入りに追加した記事をページ遷移せずにページ一覧で解除可能にするスニペット
ブックマーク機能は、後で見返したいときに簡単に呼び出せるように保存しておく機能です。 そんな「ブックマーク＝お気に入りに追加」の機能ですが、以前の記事のスニペットをカスタマイズし「ページ一覧でお気に入り解除」の機能を追加 …
JavaScriptの.addEventListenerでヒーローエリアのサイズを収まりきるように可変
最新のスマートフォンでも解像度・縦横比率が少しずつ変化しているように、デスクトップの解像度も少しずつ上がっていくかもしれません。 Webページのヒーローエリアは、ユーザーが最初に見る情報なので、離脱されないためにもこのサ …
JavaScriptの.addEventListener でフローティングバナーの表示・非表示
主に広告で使いそうで、日常的な実用性がなくCSSメインの為JavaScriptなのかは微妙なところですが、ごく簡単なコードで実装できるフローティングバナーです。 簡単なコードでできているスニペットなので、JavaScri …
JavaScriptの.addEventListenerクリックで検索フォームのモーダル
ユーザーが検索フォームに検索条件を入力して「検索」ボタンを押すと、一覧画面に表示される。Webサイトのどのシーンでも当たり前に活用されている「検索フォーム」ですが、この記事では、そんな検索フォームをボタンクリックで「モー …
GA4とGoogle Search Consoleの連携方法
既に、「2023 年 7 月 1 日より、ユニバーサル アナリティクスでは標準プロパティで新しいデータの処理ができなくなります。」と、Google Analyticsのヘッダーにデカデカ表示されています。 「そろそろGA …
JavaScriptの.lastModifiedでページの最終更新日を表示
JavaScriptの .lastModified プロパティを使用して「そのページが、最後に更新された日時＝最終更新日時」を表示します。 簡単なので、参考にしてみてください。 .lastModified JavaScr …
JavaScriptのライブラリSwiperでタブのメニューに連動したスライダー・カルーセル
JavaScriptライブラリの「Swiper」は、スライダーを簡単に設置できるライブラリです。これをベースに、ほんの少しコードを書けば「タブ」のUIと絡めたスライダーを実装することができます。 そんなUIを、Swip …
JavaScriptの.querySelectorAll()でアクティブになったタブメニューの背景が左右に動いて表示
タブの切り替えに動きを少し付けたいと思っている方は、是非参考にしてみてください。 .querySelectorAll() querySelectorAll() は、指定したセレクターの条件と一致したHTML要素を全て返す …
JavaScriptのlocation.hrefで現在のページURLを取得してヘッダーの一致した要素に下線を表示
JavaScriptの location.href を使って、ヘッダーのメニューでURLが一致した要素にclass名を付けて、表示を切り替えます。 備忘録的な内容ですが、ぜひ参考にしてみてください。 location.h …
