More than 5 years have passed since last update.

年末まで毎日webサイトを作り続ける大学生〜40日目スクロールに合わせて背景が動くパララックスサイトを作る〜

JavaScript

Posted at 2019-11-26

##はじめに
こんにちは！@70days_jsです。

昨日に引き続きパララックスです。
スクロールに合わせて背景が動くパララックスのサイトを作りました。
（ついでに以前作ったナビバーとフッターもつけてみました）

今日は40日目。(2019/11/27)
よろしくお願いします。

##サイトURL
https://sin2cos21.github.io/day40.html

##やったこと
スクロールに合わせて背景が動くパララックスのサイトを作りました。↓

スクロールして下に移動するたびに背景が微妙に動いていますね。
htmlはheader, main, footerの三部構成で作りました。
headerとfooterは以前の成果物なので省略します。

ではmainを見ていきましょう。

    <main>
        <!-- background用のdiv -->
        <div id="test">
        </div>

        <div class="contents-wrapper">
            <h2>Obama's Speech</h2>
            <div id="main-contents">
　　　　　　　　　　　　<!--　オバマ大統領の演説文 長いので省略 -->
            </div>
        </div>
    </main>

mainの中にはdivが2つあり、最初のdivは背景画像を表示する役割をしています。
次のdivはオバマ大統領の演説文を表示するためのdivです。

背景（id="test")のcss↓

#test {
    width: 150vw;
    height: 100vh;
    position: fixed;
    top: 0;
    background-image: url('画像のURL');
    z-index: -100;
}

背景画像に見せるためにfixedで固定しています。
スクロールしたら背景を横にスライドさせていくので、widthを大きめにとっています。
背景になるようにz-indexで低い数字をつけています。

次はJavaScript↓

//bodyの長さを取得
let pageHeight = document.body.scrollHeight;
//viewportの長さ
let viewportHeight = window.innerHeight;
// スクロールできる量を取得
let scrollHeigt = pageHeight - viewportHeight;

window.addEventListener('scroll', function () {
    // 現在のスクロール量を取得
    let scroll = window.pageYOffset;
    test.style.left = -(scroll / 18) + 'px';
}, false);

JavaScriptはこれで全てです。
基本的にコメントに書いてある通りですが、一点だけ。

test.style.left = -(scroll / 18) + 'px';

ここの計算式の「18」という数字は感覚で書きました。
ついでに言うと、画像を囲むdivのサイズを「150vw」にしたのも、感覚です。

#test {
width: 150vw;
...

実は今回、スクロール時の横移動の割合と画像サイズの調整がうまくできませんでした。
上のgifはデスクトップバージョンでうまく動いているように見えますが、スマホサイズにすると画像の幅がが足りず途中から背景画像がなくなってしまっています。↓

pcとスマホではどうしてもスマホが縦長になってしまうので、画像の幅的に、どうやっても画像を最後まで表示することができませんでした。

##今日のメモ

bodyの長さ（pageの長さ）・・・document.body.scrollHeight
viewportの長さ・・・window.innerHeight
bodyの長さ - viewportの長さ＝総スクロール量

ついでに衝撃の事実。↓（ CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォーマンスに与える影響 | コリスさんから引用）

ブラウザはCSSを解析するとき、CSSのセレクタを右から左に解決します
右にあるセレクタがより特定的であるほど、ブラウザはCSSのプロパティを見つけるときに効率的になる

逆にいうと、子孫セレクタとかはかなりの負荷がかかるらしい・・・

##感想
スマホ版の表示で、うまく実装する方法を見つけられなかったのが悔しいです。
最初はpc版だけを見ていて、今日はうまくいったって喜んだのにな・・・
また一つ課題ができてしまった。頑張ろう。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

##参考

勉強になりました。ありがとうございます！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

年末まで毎日webサイトを作り続ける大学生 〜40日目 スクロールに合わせて背景が動くパララックスサイトを作る〜

年末まで毎日webサイトを作り続ける大学生〜40日目スクロールに合わせて背景が動くパララックスサイトを作る〜