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

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

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

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

小橋先生の授業です。

sblog20161026a

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

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

2016.09.13

今回は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の合わせ技です。

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

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

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

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

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

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

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

コードは、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>

まず、一番上がjQueryのCDN。

その下がパララックスのコードです。
上半分が「3つのPR欄」、下半分が「新商品・定番商品のご紹介」です。

細かい解説は動画を見ていただくとして、中の「>800」「>1500」などの表記は、「800pxスクロールしたらパララックスを発動させよ!」という指示です。

あと「.fadeIn(2000)」の箇所の数値は、フワッと表示する際の表示速度です。
値が大きいほどゆっくり表示されます。

実装してみての不満点としては、スマホ表示で見るとフワッのタイミングが合ってないですね。
ここが今後の課題かなあ。

そろそろ本気ださないと・・

今回の授業で解説した3つは、パララックスでは基本的なパターンで、いろいろと応用することで様々な動きが実現可能とのこと。

パララックス、昨今のWEB制作では当たり前のように使われてますね。
そろそろ本気でおぼえないと取り残されそうな感じです。

WEBデザインの世界は変化が激しくて追いつくのが大変ですなあ。