schoo授業感想「CSSとjQueryによるパララックスの実装：基本3パターン」

オンライン動画学習サービスの「schoo（スクー）」。
授業の受講感想記です。

今回の授業は、
『デザインパターン基礎：動作に合わせてデザインを変化させるパララックス（視差効果）の実装』
https://schoo.jp/class/3397
連続8回授業の6回目。

小橋先生の授業です。

パララックスは以前の記事でも書いたことがありますが、

関連記事schoo授業感想「CSSでパララックスを実装する：動くデザイン制作」

2024.08.03

今回はCSSとjQueryの両方を使ったパターンです。

背景画像の固定

この授業では、パララックスの基本的なパターンを3つ解説しています。

まず、背景画像の中央固定。
これは最近多くなりましたね。
CSSのみを用いたパララックスです。

以下のCSSのコードを、背景画像をはめこむブロックに適用します。

position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-repeat:no-repeat;
background-position: center center;
background-size:cover;
z-index: -1;

「background-position: center center」にて
表示領域が変更になっても、画像の中心部が常に表示されます。

「background-size: cover」にて
◇画像の幅と高さの比率が固定されます。
◇背景の表示領域を覆うように表示されます。

上から何かが降ってくるパララックス

次に、ページをスクロールすると上から雪が降ってくるパララックス。
CSSとjQueryの合わせ技です。

授業の解説では、雪の個数を１０個にして、個々の雪の大きさや下降速度に差異を設けていました。

このコードはややこしいので、興味のある方は実際に動画を見て確認してください。

jQueryでページスクロールの値を取得して、それに応じて雪がハラリと降ってきます。

フワッと浮き上がるパララックス

最後に、パララックスで一番使われているパターン。
スクロールすると、画像やアイテムなどがフワッと表示される例のアレです。
jQueryのみで動きを実現しています。

これは実際にサイトに実装してみました。
以下のサンプルサイトです。
http://web-test03.opal.ne.jp/sample/bootstrap001/index.html

ページ中段の「３つのPR欄」と下段の「新商品・定番商品のご紹介」、
この２つのブロックにパララックスを施しています。

コードは、bodyの閉じタグの直前に以下のように記述しています。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>
        $(function() {
    var topBtn01 = $('.pr-block');
    topBtn01.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() >800) {
            topBtn01.fadeIn(2000);
        } else {
            topBtn01.fadeOut();
        }
    });
    
        var topBtn02 = $('#sweets');
    topBtn02.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() >1500) {
            topBtn02.fadeIn(2000);
        } else {
            topBtn02.fadeOut();
        }
    });
    
});
</script>