カテゴリー
CSS HTML jQuery Webサイト作成

画像の表示方法あれこれ

いろいろなWebサイトで、スクロールしていくと画像がフェードインしてきたり、上下左右からスライドしながら出現したりするのを見かけます。

実現方法をネットで調べると、例えばX方向にスライドしながら出現させる場合は、

  1. CSSで初期状態のX方向の位置をずらしておく。
  2. jQueryで、スクロール量が所定値を超えたらX方向の位置を適切な位置に戻す。

という方法が採られるようです。X方向の位置の指定には”transform: translateX(xpos)”が使用され、xposは1.では0以外の値、2.では0が指定されます。

これだと、1枚の画像に適用する場合や、複数の画像に対して同じ出現方法を適用する場合はいいのですが、複数の画像を異なる方法で出現させたい場合は、個別にjQueryコードを用意しなきゃならんの？と思ったので、共通のjQueryコードで実現する方法を考えてみました。

思いついたのは、

  1. 各画像に個別IDと共通クラスを設定する。
  2. jQueryで、スクロール量が所定値を超えたら共通クラスを持つオブジェクトにクラス(例：”visible”)を追加する(クラスの追加は「スクロール時にヘッダを固定する」でも使いました)。
  3. CSSで個別id単独の場合と、クラス”visible”が追加された場合のスタイルを設定する。

という方法です。

早速試してみます。

目次 [閉じる]
  1. 右からフェードイン
  2. 左からフェードイン
  3. 上からフェードイン
  4. 下からフェードイン
  5. 拡大しながらフェードイン

1. 右からフェードイン

figureタグに対し、ID “fadeinImg1″、クラス”fadein”を設定しています。

CSS設定、jQueryコードは下記の通りです。

<CSS>

#fadeinImg1 {
    opacity: 0;
    transform: translate(200px, 0);
    transition: 1s;
}
#fadeinImg1.visible {
    opacity: 1;
    transform: translate(0, 0);
}
  • opacity：初期状態は0(透明)、クラス”visible”付加時は1。これは以降も共通です。
  • X方向の位置を、初期状態では右に200pxずらし、クラス”visible”付加時は元に戻します。

<jQuery>

jQuery(function() {
    var _window = jQuery(window),
	_fadein = jQuery('.fadein');
		
    _window.on('scroll', function() {
	_fadein.each(function() {
	    var _element = jQuery(this);
	    var elePos = _element.offset().top;
	    var scroll = _window.scrollTop();
	    var winHeight = _window.height();
            if (scroll > elePos - winHeight + 200) {
		_element.addClass('visible');
	    } else {
		_element.removeClass('visible');
	    }
	});
    });
});

“_fadein.each(function() { })”で、クラス”fadein”を持つ全オブジェクトに対し、下記の処理を行います。

  • _element：クラス”fadein”を持つ各オブジェクト
  • elePos：_elementの左上隅のY座標値
  • scroll：スクロール量
  • winHeight：ウィンドウの高さ
  • スクロール量が所定値より大きい場合(scroll > elePos – winHeight +200)、オブジェクトにクラス”visible”を追加し、それ以外の場合はオブジェクトからクラス”visible”を削除します。

今回は繰り返し動作を確認できるよう、クラス”visible”を削除する処理も入れています。

なお、上記のjQueryコードは全画像共通なので、以降は示しません。

2. 左からフェードイン

figureタグに対し、ID “fadeinImg2″、クラス”fadein”を設定しています。

CSS設定は下記の通りです。

<CSS>

#fadeinImg2 {
    opacity: 0;
    transform: translate(-200px, 0) rotateZ(360deg);
    transition: 1s;
}
#fadeinImg2.visible {
    opacity: 1;
    transform: translate(0, 0) rotateZ(0);
}
  • X方向の位置を、初期状態では左に200pxずらし、クラス”visible”付加時は元に戻します。
  • Z軸周りの回転動作を追加しています。”transform”は一度に複数の動作を指定できます！

3. 上からフェードイン

画像1

figureタグに対し、ID “fadeinImg3″、クラス”fadein”を設定しています。

CSS設定は下記の通りです。

<CSS>

#fadeinImg3 {
    opacity: 0;
    transform: translate(0, -200px);
    transition: 1s;
}
#fadeinImg3.visible {
    opacity: 1;
    transform: translate(0, 0);
}
  • Y方向の位置を、初期状態では上に200pxずらし、クラス”visible”付加時は元に戻します。

ゆっくりスクロールすると、画像が表示されたり消えたりしてちょっと微妙です。

4. 下からフェードイン

画像2

figureタグに対し、ID “fadeinImg4″、クラス”fadein”を設定しています。

CSS設定は下記の通りです。

<CSS>

#fadeinImg4 {
    opacity: 0;
    transform: translate(0, 200px) rotateY(360deg);
    transition: 1s;
}
#fadeinImg4.visible {
    opacity: 1;
    transform: translate(0, 0) rotateY(0);
}
  • Y方向の位置を、初期状態では下に200pxずらし、クラス”visible”付加時は元に戻します。
  • Y軸周りの回転動作を追加しています。

5. 拡大しながらフェードイン

画像3

figureタグに対し、ID “fadeinImg5″、クラス”fadein”を設定しています。

CSS設定は下記の通りです。

<CSS>

#fadeinImg5 {
    opacity: 0;
    transform: scale(0.5, 0.5);
    transition: 3s;
}
#fadeinImg5.visible {
    opacity: 1;
    transform: scale(1, 1);
}
  • 縦横の倍率を、初期状態では0.5倍とし、クラス”visible”付加時は等倍に戻します。
  • これまでより遷移時間を長くしています。

以上、ひとつのjQueryコードで5通りの画像の表示方法を実践してみました。通常はこんなバラバラな表示方法を使うことはないと思いますが^_^;

最後までお読みいただきありがとうございました。