画像の遅延読み込み【範囲内一括】

画像毎ではなく、指定した範囲内の画像をまとめて遅延読み込みする方法を紹介します。 「画像の遅延読み込み」 を一部変更しています。

HTML

補足

• ３つの section クラス内に、３枚の画像を指定しています。

jQuery

補足

• section クラスの上端が、画面下端から 100 ピクセルを超えたら LOAD クラスを付加しています。
• LOAD クラスが付いた section クラス内の画像を対象に、遅延読み込みしています。

CSS

サンプル

「画像の遅延読み込み【範囲内一括】」のサンプル

関連記事

• 画像の遅延読み込み

スクロール時にアニメーションをつけて表示

スクロール時に、指定要素がウィンドウに入ったらアニメーションをつけて表示する方法を紹介します。

HTML

補足

• img 要素の data-animation 属性でアニメーションの種類を指定しています。

jQuery

補足

• スクロール時に、指定要素の上端が画面下から100ピクセルの位置を超えたら data-animation 属性に指定されたアニメーション用のクラスを付加しています。

CSS

補足

• あらかじめ data-animation 属性のついた img 要素を非表示にしています。
• data-animation 属性で指定しているアニメーション用のクラスを定義しています

サンプル

「スクロール時にアニメーションをつけて表示」のサンプル

関連記事

• スクロール時に指定要素がウィンドウ内に入ったらフワッと表示

スクロール時に外部ファイルのコンテンツを順次読み込む

スクロール時に、あらかじめ用意した外部ファイルのコンテンツを、つぎつぎに読み込む方法を紹介します。

HTML 【読み込み側】

HTML 【読み込まれる外部ファイル：report-2016.html】

補足

• li 要素の data-fname 属性に、読み込む外部ファイル名を指定しています。
• 読み込まれる外部ファイルには、３枚の画像が表示されるよう、 ul 要素を記述しています。

jQuery

補足

• li 要素の上端が、ウィンドウ下端から 100 ピクセルを超えたら data-fname 属性に指定した外部ファイルを読み込んでいます。
• 読み込んだら loaded クラスをつけて、li 要素の高さをコンテンツに合わせています。

CSS

補足

• li 要素に一画面分の高さを設定して、一度に読み込まれないようにしています。
• 読み込んだら、コンテンツに応じた高さになるよう jQuery で auto を設定しています。

サンプル

「スクロール時に外部ファイルのコンテンツを順次読み込む」のサンプル

関連記事

• スクロール時に指定要素がウィンドウ内に入ったらフワッと表示

一定量スクロールしたらクラスを付加する

ページを一定量スクロールしたらクラスを付加する方法を紹介します。クラスを付加することで、表示・非表示を切り替えたり、文字や背景色の色を変えることができます。

HTML

jQuery

補足

• このサンプルではスクロール量が 200 ピクセルを超えたら、#container に BG-BLUE クラスを付加しています。逆にスクロール量が 200 ピクセル以下になったら、BG-BLUE クラスを削除しています。

CSS

補足

• BG-BLUE クラスで背景色を指定しています。

サンプル

「一定量スクロールしたらクラスを付加する」のサンプル

関連記事

• スクロール方向に応じてメニューを表示・非表示
• スクロール時に指定要素がウィンドウ内に入ったらフワッと表示

メニューを左からスライド・イン

メニューを画面の左からスライド・インさせる方法を紹介します。

HTML

補足

• show-menu クラスを付けた span 要素をクリックすることで、メニューのスライドイン・アウトをおこないます。

jQuery

補足

• show-menu クラスを付けた span 要素がクリックされたら、メニューの左位置を変更してスライド・イン、スライド・アウトさせています。
• リサイズ（または回転）時に左位置を再設定しないと、画面外に出しておいたメニューが一部見えてしまうことがあるので、リサイズされたら左位置を設定し直しています。

CSS

補足

• メニューの左位置は、メニューの幅のマイナス値を指定して、あらかじめ画面外に出しています。
• スマート・フォンの横持ちでメニューの下部が切れてしまうことがあるので、#menu .inner のスタイルを設定して、スクロールできるようにしています。

サンプル

「メニューを左からスライド・イン」のサンプル

スクロール方向に応じてメニューを表示・非表示

下方向へスクロールするとメニューを非表示、上方向へスクロールするとメニューを表示する方法を紹介します。

HTML

jQuery

補足

• スクロール・イベント発生時に、その方向を調べ、メニューを表示・非表示しています。

CSS

補足

• メニューをウィンドウ上端に固定表示されるようスタイルを設定しています。

サンプル

「スクロール方向に応じてメニューを表示・非表示」のサンプル

指定要素がウィンドウ内にあればクラスを付加

指定要素がウィンドウ内にあればクラスを付加、ウィンドウ外であればクラスを削除する方法を紹介します。

HTML

補足

• ウィンドウ内にあるかを判定する要素に checker クラスを付けます。

jQuery

補足

• 判定する要素の上端がウィンドウ内にあれば、判定要素に IN クラスを付加し、ウィンドウ外であれば IN クラスを削除しています。
• このサンプルでは、ウィンドウ上下端から内側へ 100 ピクセル入ったエリアに判定要素があるかチェックしています。

CSS

補足

• このサンプルでは、IN クラスを付加された判定要素の背景色が緑色になります。

サンプル

「指定要素がウィンドウ内にあればクラスを付加」のサンプル

”もっと見る” をクリックして続きを表示

”もっと見る” をクリック（タップ）して続きを表示する方法を紹介します。

HTML

補足

• ul 要素に show-more クラスを付けます。
• li 要素に 表示する内容を記述します。
• span 要素の next クラスで続きを表示するようにします。
• span 要素の close クラスで表示された続きを閉じるようにしています。

jQuery

補足

• next クラスがクリックされたら、自身を非表示にして、直後の li 要素を表示します。
• close クラスがクリックされたら、最初の li 要素以外を非表示にして、すべての next クラスを表示状態に戻しています。

CSS

補足

• show-more クラスの最初の li 要素以外を非表示にしています。
• next クラスと close クラスのスタイルを設定しています。

サンプル

「”もっと見る” をクリックして続きを表示」のサンプル

非表示にしておいた div 要素をモーダル・ウィンドウ【ダイアログ・モード】に表示

非表示にしておいた div 要素をモーダル・ウィンドウ【ダイアログ・モード】で表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。

HTML

補足

• HTML は通常のモードと同じです。jQuery 側で表示モードを変えています。

jQuery

補足

• モーダル・ウィンドウを表示する前にクラス DIALOG を付加しています。それ以外は通常モードと同じです

CSS

補足

• クラス DIALOG が付いたモーダル・ウィンドウのコンテナのスタイルを定義しています。
• コンテナをダイアログ風の大きさにして、それがモーダル・ウィンドウの中央に表示されるようにしています。

サンプル

「非表示にしておいた div 要素をモーダル・ウィンドウ【ダイアログ・モード】に表示」のサンプル

関連記事

• 非表示にしておいた div 要素をモーダル・ウィンドウに表示

YouTube 動画をモーダル・ウィンドウに表示

YouTube 動画をモーダル・ウィンドウに表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。

HTML

補足

• div id="data-youtube" 内に埋め込みコードを記述し、次に２点を変更します。
• 埋め込みコードの "src" を "data-src" に変更します。
• 埋め込みコードに src="about:blank" を追加します。
• 尚、div id="data-youtube" は CSS で非表示にしています。

jQuery

補足

• div id="load-data-youtube" がクリックされたら、モーダル・ウィンドウにクラス YOUTUBE を付加します。
• div id="data-youtube" 内の埋め込みコードをモーダル・ウィンドウのコンテナにコピーします。
• コピーした埋め込みコードの data-src の値を src の値にセットします（ここで初めて YouTube 動画のデータがロードされます）。続いて、モーダル・ウィンドウを表示します。

CSS

補足

• クラス YOUTUBE が付加されたモーダル・ウィンドウのコンテナは、背景が透過されるように設定しています。また、スクロール・バーが表示されてしまうので overflow: hidden を設定しています。
• コンテナ内にコピーされた iframe の幅と高さは、コンテナと同じ大きさになるように 100% を設定しています。
• あらかじめ埋め込みコードを記述した div id="data-youtube" は非表示にしています。

サンプル

「YouTube 動画をモーダル・ウィンドウに表示」のサンプル

関連記事

• 非表示にしておいた div 要素をモーダル・ウィンドウに表示

クリックした画像をモーダル・ウィンドウに表示

クリックした画像をモーダル・ウィンドウに表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。

HTML

補足

• HTML に関してはモーダル・ウィンドウを用意する以外、特にすることはありません。

jQuery

補足

• 画像がクリックされたら、モーダル・ウィンドウにクラス IMAGE を付加します。
• 続いて、コンテナ内に span class="IMG を作成し、その背景画像にクリックした画像のファイル名を設定します。最後にモーダル・ウィンドウを表示します。

CSS

補足

• クラス IMAGE が付加されたモーダル・ウィンドウは、背景が透過されるように設定しています。
• span class="IMG" はブロック要素化しコンテナと同じ大きさにして、背景画像が比率を保ったまま最大表示されるよう contain を指定しています。

サンプル

「クリックした画像をモーダル・ウィンドウに表示」のサンプル

関連記事

• 非表示にしておいた div 要素をモーダル・ウィンドウに表示

非表示にしておいた div 要素をモーダル・ウィンドウに表示

あらかじめ非表示にしておいた div 要素をモーダル・ウィンドウに表示する方法を紹介します。

HTML

補足

• モーダル・ウィンドウ div id="MODAL-WINDOW" を用意し、非表示にしておきます。
• モーダル・ウィンドウに表示する内容を div id="data-div" 内に記述して、非表示にしておきます。

jQuery

補足

• #load-data-div がクリックされたら、モーダル・ウィンドウのコンテナに表示する内容をコピーし、モーダル・ウィンドウを表示します。
• モーダル・ウィンドウの閉じるボタンがクリックされたら、モーダル・ウィンドウを非表示にし、コンテナ内にコピーしたデータを空にします。
• 最後にモーダル・ウィンドウに付加されたクラスを削除します（このサンプルではクラスを付加していないので、削除する意味はありません）。

CSS

補足

• モーダル・ウィンドウ関連のスタイルを定義しています。
• iOS でコンテナのスクロール・バーが表示されないので、表示されるよう定義しています。
• モーダル・ウィンドウとコンテナに表示する内容は非表示にしています。

サンプル

「非表示にしておいた div 要素をモーダル・ウィンドウに表示」のサンプル

YouTube 動画の遅延読み込み

スクロールして YouTube 動画がウィンドウ内に入った時に、逐次ロードする方法を紹介します。「縦横比を維持したまま横幅いっぱいに YouTube 動画を表示」の遅延読み込み版です。

HTML

補足

• YouTube 動画の埋め込みコードを一部書き換えます。
• src="…" を data-src="…" に変更し、src="about:blank" を追加します。
• src="about:blank" なので、HTML のロード時に YouTube 動画は読み込まれません。

jQuery

補足

• YouTube 動画がウィンドウ内に入ったら data-src の値を src に上書きしています。

CSS

補足

• CSS は「縦横比を維持したまま横幅いっぱいに YouTube 動画を表示」と同じコードです。

サンプル

「YouTube 動画の遅延読み込み」のサンプル

関連記事

• 縦横比を維持したまま横幅いっぱいに YouTube 動画を表示

リスト要素に一定間隔（秒）でクラスを付け替えていく

リスト要素に一定間隔（秒）でクラスを付け替えていく方法について紹介します。ニュース・タイトルや画像を一定間隔で切り替えたい時などに使えると思います。

HTML

jQuery

補足

• このサンプルでは指定した ul li 要素に３秒間隔で "ON" というクラスを順番に付け替えています。

CSS

補足

• 非表示にしている ul li 要素が "ON" というクラスが付加されたタイミングで表示されます。

サンプル

「リスト要素に一定間隔（秒）でクラスを付け替えていく」のサンプル

関連記事

• 指定要素に一定間隔（秒）でクラスを付けていく

body 要素にデバイスを識別するクラスを付加

ウィンドウ幅に応じて、デバイスを識別するクラスを body 要素に付加する方法を紹介します。付加された識別クラスを元に、デバイス毎に異なるスタイルを CSS で指定できるようになります。

HTML

jQuery

補足

• このサンプルでは、ロード時とリサイズ時にウィンドウ幅をチェックして、 600px 未満なら "SMP"、960px 未満なら "TAB"、それ以上なら "PC" というクラスを body 要素に追加しています。

CSS

補足

• このサンプルでは、body 要素に付加されているクラスによって、表示される li 要素とその背景が変わるよう CSS を設定しています。

サンプル

「body 要素にデバイスを識別するクラスを付加」のサンプル

ページ内リンクのスムーズ・スクロール

ページ内のリンクへ移動する時にスムーズにスクロールする方法を紹介します。

HTML

補足

• 通常通りページ内リンクを設定します。

jQuery

補足

• リンク先が '＃' で始まるリンクがクリックされた時に、アニメーションで移動しています。

サンプル

「ページ内リンクのスムーズ・スクロール」のサンプル

背景画像の遅延読み込み

「画像の遅延読み込み」の背景画像版を紹介します。

HTML

補足

• 本来表示させる背景画像を data-bg 属性で指定します。
• src 属性には仮のファイルを指定します。仮のファイルは背景画像を表示させる領域と同じ縦横比の透明 PNG ファイルです。サンプルでは spacer-1x1.png という 1px × 1px の透明 PNG ファイルで、正方形の領域を指定しています。
• 仮ファイルの画像により、本来表示される画像の領域が確保され、背景に指定した読み込み中の画像（loader.gif）が、その中央に表示されます
• data-bg-size 属性の値に contain または cover を指定することで、背景画像の表示の仕方を指定できます。

jQuery

補足

• ロード・スクロール・リサイズ時に data-bg 属性のついた img 要素を delayBg 関数で処理しています。
• delayBg 関数では、data-bg 属性のついた img 要素に SHOW クラスがなく、かつ非表示状態でなければ data-bg 属性の値を background-image プロパティにセットして表示しています（フワッと表示させるため、fadeOut と fadeIn を使用）。そのあと、SHOW クラスを付加して、表示済みのフラグを付けています。
• 非表示状態のブロック要素内にある img 要素がロード時に処理されてしまうようなので、if 文内に && !$(this).is(':hidden') を付け加えています。
• data-bg-size 属性が指定されている場合は、その値を調べて、背景画像の表示方法を変更しています。

CSS

補足

• data-bg 属性の付いた img 要素の背景画像として、読み込み中を示す loader.gif をセットしています。
• jQuery で処理されるまでは loader.gif 画像が透明 PNG ファイルの背景画像として見えます。処理後は本来表示される背景画像が表示されるので見えなくなります。

サンプル

「背景画像の遅延読み込み」のサンプル

関連記事

• 画像の遅延読み込み

画像の遅延読み込み

画像の多いページでは読み込み時に負荷がかかるので、読み込み時はウィンドウ内にある画像のみロードし、それ以降の画像はスクロールして画像がウィンドウ内に入った時に、逐次ロードする方法を紹介します。

HTML

補足

• 本来表示させる画像を data-src 属性で指定します。
• src 属性には仮のファイルを指定します。仮のファイルは本来表示させる画像と同じ縦横比の透明 PNG ファイルです。サンプルでは spacer-4x3.png という 4px × 3px の透明 PNG ファイルを指定しています。
• 仮ファイルの画像により、本来表示される画像のエリアが確保され、背景に指定した読み込み中の画像（loader.gif）が、その中央に表示されます

jQuery

補足

• ロード・スクロール・リサイズ時に data-src 属性のついた img 要素を delayImage 関数で処理しています。
• delayImage 関数では、data-src 属性のついた img 要素に SHOW クラスがなく、かつ非表示状態でなければ data-src 属性の値を src 属性にセットして表示しています（フワッと表示させるため、fadeOut と fadeIn を使用）。そのあと、SHOW クラスを付加して、表示済みのフラグを付けています。
• 非表示状態のブロック要素内にある img 要素がロード時に処理されてしまうようなので、if 文内に && !$(this).is(':hidden') を付け加えています。

CSS

補足

• data-src 属性の付いた img 要素の背景画像として、読み込み中を示す loader.gif をセットしています。
• jQuery で処理されるまでは loader.gif 画像が透明 PNG ファイルの背景画像として見えます。処理後は本来表示される画像が前面に表示されるので見えなくなります。

サンプル

「画像の遅延読み込み」のサンプル

関連記事

• 背景画像の遅延読み込み