Jqueryでパララックス画像を自作する方法

2023年5月29日 22:58

お疲れ様です。
パララックス画像、WEB制作学習中の自分からするとスタイリッシュで憧れます。

スクロールすると、スクロール量に応じて特定の画像だけが上向きに動く、というものになります。

色々とプラグインが出ているパララックスですが、今回はその仕組みを知るためにも1から自作してみました。

実務で1から自作することは、工数の関係上などであまりなさそうですが、学習の為にやってみました。

なかなか大変でしたが、仕組み自体はシンプルです。

仕組み

今回はbackground-imageではなく、imgタグを使います。
<div class="img">という画像エリアを表すdivタグの中にimgタグがあります。

親の画像エリアにposition: relative、はみ出た要素を隠すoverflow: hiddenを指定し。

子要素のimgは、高さが欲しいのでheight: 150%、width:autoを指定します。
さらに、position: absoluteとtop: 0、left: 50%、translate: -50% 0を指定します。

jQueryでスクロールして画面内に入ったら、「スクロール量 - 要素の位置」に指定した数値割ったものをマイナスしてやります。
.css('top', -「スクロール量 - 要素の位置 - 調整用の数値」)
といった感じです。

コードは以下です↓

<!-- index.html -->


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.min.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="txt-img">
            <div class="text">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum eveniet eos animi laboriosam libero! Odit iure consequatur saepe quod. Quae at, quis quidem minus fuga ipsam inventore non. Alias, magnam.
                </p>
            </div>
            <div class="img">
                <img src="./img/cabbage-gfbe0c78be_640.jpg" alt="" srcset="">
            </div>
        </div>

        <div class="txt-img reverse">
            <div class="text">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum eveniet eos animi laboriosam libero! Odit iure consequatur saepe quod. Quae at, quis quidem minus fuga ipsam inventore non. Alias, magnam.
                </p>
            </div>
            <div class="img">
                <img src="./img/kristopher-roller-zepnJQycr4U-unsplash.jpg" alt="" srcset="">
            </div>
        </div>

        <div class="txt-img">
            <div class="text">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum eveniet eos animi laboriosam libero! Odit iure consequatur saepe quod. Quae at, quis quidem minus fuga ipsam inventore non. Alias, magnam.
                </p>
            </div>
            <div class="img">
                <img src="./img/matteo-di-iorio-VD-Vjc8VmRA-unsplash.jpg" alt="" srcset="">
            </div>
        </div>

        <div class="txt-img reverse">
            <div class="text">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum eveniet eos animi laboriosam libero! Odit iure consequatur saepe quod. Quae at, quis quidem minus fuga ipsam inventore non. Alias, magnam.
                </p>
            </div>
            <div class="img">
                <img src="./img/merch-husey-H-AmuI7mu-c-unsplash.jpg" alt="" srcset="">
            </div>
        </div>

        <div class="txt-img">
            <div class="text">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum eveniet eos animi laboriosam libero! Odit iure consequatur saepe quod. Quae at, quis quidem minus fuga ipsam inventore non. Alias, magnam.
                </p>
            </div>
            <div class="img">
                <img src="./img/taylor-kiser-N7buN8Lv7uQ-unsplash.jpg" alt="" srcset="">
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <script src="./js/script.js"></script>
</body>

</html>

cssがコチラです(sassで書いてます。)↓


//style.scss
@charset "utf-8";
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 400vh;
}

.container {
    width: min(1120px, 100% - 4rem);
    margin-inline: auto;
}

.txt-img {
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    gap: 35px;
    &:first-child {
        margin-top: 650px;
    }
    .text {
        flex: 2;
        p {
            font-size: 1.5rem;
        }
    }
    .img {
        flex: 1.5;
        aspect-ratio: 3/2;
        position: relative;
        overflow: hidden;
        img {
            height: 150%;
            width: auto;
            position: absolute;
            top: 0;
            left: 50%;
            translate: -50% 0;
        }
    }
}

.reverse {
    flex-direction: row-reverse;
}

txt-imgというクラスがついたdivタグの中に、text、imgというdivタグが入っています。
display: flex でそれぞれ横並びにし、reverseというクラスがついたものだけ左右逆に並べています。

text、imgそれぞれのdivタグに flexプロパティを指定し、幅を調整します。

txt-imgの最初の要素だけにmargin-top: 650px、bodyにはheight: 400vhを指定し、十分なスクロール量を確保しました。
ここはスペース確保のためのスタイルで、実務では必要ありません。

Jqueryがコチラです↓
スクロール量・要素の位置・cssの上書きの為に書きます

//script.js

$(function() {
    function parallaxImg() {
        let img = $('.img img');
        img.each(function() {
            let elemPos = $(this).offset().top;
            let scroll = $(window).scrollTop();
            let windowHeight = $(window).height();
            let adjust = 120;
            //要素が画面内に入ってすぐではなく、そこから120上に来たら発動するため

            let parallaxSpeed = 0.2;
            //画像を動かす量が多すぎると、はみ出してします可能性がある為。この値を大きくすれば、画像が動く量が大きくなる

            if (scroll > elemPos - windowHeight + adjust) {
                $(this).css('top', (scroll - elemPos) * parallaxSpeed + 'px');
                //スクロール量から要素の位置を引き、調整用の数値をかけ、文字列'px'を足したものをtopに代入
            }
        });
    }
    $(window).on('scroll', function() {
        parallaxImg();
　　　　　　　//画面をスクロールした時に、関数parallaxImgが発動する
    });
});

以上になります。
マウスホイールでスクロールすると、どうしてもカクカクするので、慣性スクロールなどと組み合わせると効果を発揮しそうです。

あと、画像の高さを十分確保することが必要なのでheight: 150%をしてしていますが。
それに合わせて、width: auto で横幅も多少広くなるはずです。

逆に縦長すぎる画像だと、横幅が狭くなり、画像の両端がスカスカになってしまうので、photoshopの「コンテンツに応じた塗りつぶし」でスペースを確保しておくといいかもしれないです。

最後まで閲覧頂きありがとうございます。

この記事が気に入ったらサポートをしてみませんか？