スクロールすると背景が動くWebページを作る【Apple風のかっこいいサイト作り Part1】

こんちゃ！洋梨🍐です。

今回は” Apple風のかっこいいサイトの作り方 ” です。

さて、今回作っていくのはこちら「スクロールすると背景も動くページ」です

Apple 「AirPods Pro」公式サイト( https://www.apple.com/jp/airpods-pro/ )
スクロールごとに背景が変わっていきます

めちゃくちゃかっこいいですね！めちゃくちゃAppleを感じますね！(語彙力)

さて、では作って行きましょう。

スクロールごとWebページの背景を変える

さて、まずスクロールされたときにWebページの背景を動かすにはどうすればいいでしょう？

GIF画像？動画？

いろいろあるかもしれませんがここはAppleさんに習いましょう。

方法を考える

上画像はページをDeveloper Toolで見たところなのですが、画像がいくつもダウンロードされてるのが見えるでしょうか？

という事で動画ではなく、画像で実装されている様です！

つまり画像を高速で差し替えてパラパラ漫画のように再現していたわけですね。

なるほどさすが勉強になりますね☻

画像をスクロールごとに差し替える

さてここからが本題です。

まずWebページの画像を差し替えていく方法です。

Canvas内に描画する方法も試したのですが、普通にImageをDOMで置き換える方法でも十分だったので今回はこの方法で実装します。

まずは連続再生する画像を用意します(連番にしておきます)。

次にHTMLを用意します。

<body>
<div class="content">
    <div class="padding">
        <p style="color:white;">HELLO</p>
    </div>

    <div id="anim_img_box">
        <img id="anim_img" src="anim/img (1).png" style="width: 100%;"/> <!--初期画像を入れておくよ。置き換わる部分だよ-->
    </div>

    <div id="anim_img_padding" class="padding">
        このエリアは画像を動かすためにスクロールされますが、重なっているので見えません。<br>
        このサイズはJavaScriptで変わります。
    </div>
    <div class="padding">
        <p style="color:white">Let's start.</p>
    </div>
</div>
</body>

例として上のようなHTMLを用意しました。

ではJavaScriptで実装していきます。

const SIZE = 140; // 枚数
var tmp = {};
    function loadImageToTmp(){
        for(var i=1;i<=SIZE;i++){
            const _i = i;
            const img = new Image();
            tmp[_i] = null;
            img.src = "anim/img ("+_i+").png"; // 連続するファイル名
            img.addEventListener("load",()=>{
                tmp[_i] = img;
            })
        }
    }

まずは使う画像をこのようにダウンロード、キャッシュしておきます。

そして、表示させたいタイミング(今回はスクロールの量ごと)で画像を置き換えるだけです。

(※ 事前にダウンロードを行っておかないとスムーズな動作を再現するのは不可能になってしまいます。)

スクロール量ごと置き換えたいときはこのようにします。

const PX = 5; // 5px分の移動ごと画像を1枚進める   
const offset = $("#anim_img_box").offset(); // 画像を入れるdiv要素(position:stickyでトップに来たら固定される)
    $(window).scroll(function() {
        const y = $(window).scrollTop();
        const dy = y - offset.top;
        if(offset.top<y&&y<offset.top+SIZE*PX){
            $("#anim_img_box").css("top",0)
            const i = Math.floor(dy / PX);
            if(i<=0||i>=SIZE) return;
            if(tmp[i].src) image.src = tmp[i].src;
        }else if(y>=offset.top+SIZE*PX){
            $("#anim_img_box").css("top","-"+(dy-SIZE*PX)); // スクロール分が終了したときに移動を始める
        }
    });

さて、では用意できたところでWeb上で動かすとどうなるでしょうか、、、

おおおおおおおおおおおおおおお

なかなかいいんじゃないですかね？ｗ

実行・サンプルはこちら ※ソースなど参考にしてみてくださいね！

↑ Iframe内ではうまく動かないかもしれません…(@_@)ﾋﾟｴﾝ

ちなみにPCをベースに作ってますが、一応スマホでも動きます^^

すごいね！！

—

今回はここまでです！

次回はこの様な3DCGを作る工程を解説したいと思います。

3DCG初心者の方はこちらから：「サイトで使える3DCGを作る」

次記事：「 3DCGアニメーションを作る」

ここまで読んでくれてありがとうございました！！

ホームページでは他にも

・様々な記事や作った作品および過程
・ソースコード、素材ファイル
・あらゆる”モノ”の作り方

などなど随時、記事や作品を新規公開・更新していますので是非見ていってくださいね！見ていただけると本当に嬉しいです！

タグ: Apple風のかっこいいサイト作り, DOM, JavaScript, JQuery