【jQuery】背景画像をパララックスさせる方法

JavaScript

今回は、「jQueryを使って背景画像をパララックスさせる方法」について紹介します。

デザインの幅が広がるので、是非試してみてください。

パララックスとは?

パララックスは、英語で「視差」という意味になります。

視差とは、サイトを構成するパーツごとのスクロールスピードをずらすスクロール効果のことを言います。

パララックスを使うことで、いつもと違う印象をユーザーに与えることができますよ。

【jQuery】背景画像をパララックスさせる方法

完成形はこちら

1つ目の背景画像をパララックスなしにして、2つ目の背景画像をパララックスありにしました。

2つ目のパララックスありの背景画像は、テキストと微妙にスクロールのズレがあることが分かると思います。

これがパララックス、つまり視差効果になります。

準備

まずはjQueryのCDNをbodyの閉じタグの直前に書きましょう。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- パララックスあり -->
<div class="first-v2" id="parallax-01">
<p>パララックスあり<br>パララックスあり</p>
</div>
<!-- パララックスあり --> <div class="first-v2" id="parallax-01"> <p>パララックスあり<br>パララックスあり</p> </div>
<!-- パララックスあり -->

<div class="first-v2" id="parallax-01">
    <p>パララックスあり<br>パララックスあり</p>
</div>

背景画像をパララックスさせたい部分に「id=”parallax-01″」を指定します。

id名はなんでもOKですが、分かりやすい名前にすると後でコードを理解しやすいのでおすすめですよ。

CSS

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// パララックスあり
.first-v2 {
position: relative;
background: url(../image/1.jpeg);
background-size: cover;
height: 0%;
padding-top: unquote("min(100vh,75%)");
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
line-height: 1.5;
font-size: unquote('max(3vw, 16px)');
}
}
// パララックスあり .first-v2 { position: relative; background: url(../image/1.jpeg); background-size: cover; height: 0%; padding-top: unquote("min(100vh,75%)"); p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; line-height: 1.5; font-size: unquote('max(3vw, 16px)'); } }
// パララックスあり

.first-v2 {
    position: relative;
    background: url(../image/1.jpeg);
    background-size: cover;
    height: 0%;
    padding-top: unquote("min(100vh,75%)");
    p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        line-height: 1.5;
        font-size: unquote('max(3vw, 16px)');
    }
}

JavaScript

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// first-vの背景画像のパララックス
$(function () {
var target1 = $("#parallax-01");
var targetPosOT1 = target1.offset().top;
var targetFactor = 0.5;
var windowH = $(window).height();
var scrollYStart1 = targetPosOT1 - windowH;
$(window).on('scroll', function () {
var scrollY = $(this).scrollTop();
if (scrollY > scrollYStart1) {
target1.css('background-position-y', (scrollY - targetPosOT1) * targetFactor + 'px');
}
});
});
// first-vの背景画像のパララックス $(function () { var target1 = $("#parallax-01"); var targetPosOT1 = target1.offset().top; var targetFactor = 0.5; var windowH = $(window).height(); var scrollYStart1 = targetPosOT1 - windowH; $(window).on('scroll', function () { var scrollY = $(this).scrollTop(); if (scrollY > scrollYStart1) { target1.css('background-position-y', (scrollY - targetPosOT1) * targetFactor + 'px'); } }); });
// first-vの背景画像のパララックス
$(function () {
    var target1 = $("#parallax-01");
    var targetPosOT1 = target1.offset().top;
    var targetFactor = 0.5;
    var windowH = $(window).height();
    var scrollYStart1 = targetPosOT1 - windowH;

    $(window).on('scroll', function () {
        var scrollY = $(this).scrollTop();
        if (scrollY > scrollYStart1) {
            target1.css('background-position-y', (scrollY - targetPosOT1) * targetFactor + 'px');
        } 
    });
});

まとめ

以上が、jQueryを使って背景画像をパララックスさせる方法でした。