はてなブックマーク

制作したサイトのページの表示速度が遅いと感じたことはありませんか？ imgタグで配置した画像は通常見えている画面内に映っていなくてもそのページにあるもは全て読み込まれてしまいます。 つまり見えてもいない画像を読み込むためページ表示速度が遅くなってしまいます。 しかしその問題は画像の遅延読み込みという技術を用いることにより解消することができます。 この記事ではそれ実装できるlazyload.jsをご紹介します！ 画像の遅延読み込みとは 遅延読み込みとは画面内に入ってきた画像のみ（タイミングは調整できます）読み込みます。 それ以外の見えていない画像は読み込み待ち状態となります。 つまり余計な画像を読まないためページの表示速度が速くなります。 デモ まずは下記のデモを御覧ください。 スクロールするを遅れて画像が読み込まれてるのが確認できるかと思います。 遅延読み込みを可能にするlazyload.

特定のセクションのみ横幅いっぱいに背景があるデザインって多くないですか？ 今回はそんなデザインのコーディング時のテクニックをご紹介します。

縦長のページでよくスクロールすると位置でナビゲーションの状態が変化するサイトをみたことがありませんか？ 状態としてはページの現在地を知らせるためのUIが多いですね。 この記事ではそのJSの作り方をご紹介します！ デモ まずはデモページを用意しましたので御覧ください。 デモページ：/demo/page-position-nav 作り方（実装） それではスクロール位置でナビの状態が変化するJSの紹介です。 スクロール用ライブラリ「ScrollMagic」を読み込み 今回のJSにはScrollMagicというライブラリを使用します。 僕の記事ではよく登場するライブラリです。 個人的にはスクロール関連の処理はこれがあればある程度実装できてしまうと思っています。 ScrollMagic公式 以下、読み込み方法です。 CDN(scriptタグ)の場合 <script src="//cdnjs.clou

デモ ボタンとボタン以外をクリックしてみてください。 HTML 以下のHTMLを例にJavaScriptを紹介します。 <button class="c-button"> click!! </button> 以下のJavaScriptをコピペで使用できます。 .c-buttonの箇所を書き換えて使用してください。 document.addEventListener('click', (e) => { if(!e.target.closest('.c-button')) { //ここに外側をクリックしたときの処理 } else { //ここに内側をクリックしたときの処理 } }) 解説 イベントオブジェクトのtargetを使用しイベントが発生した要素の親要素に.c-buttonがなければ外側と判定します。 closestメソッドを使用しているのでIEで使用するにはポリフィルを読み込んでくださ