今回は、「jQueryを使って背景画像をパララックスさせる方法」について紹介します。
デザインの幅が広がるので、是非試してみてください。
パララックスとは？
パララックスは、英語で「視差」という意味になります。
視差とは、サイトを構成するパーツごとのスクロールスピードをずらすスクロール効果のことを言います。
パララックスを使うことで、いつもと違う印象をユーザーに与えることができますよ。
【jQuery】背景画像をパララックスさせる方法
完成形はこちら。
1つ目の背景画像をパララックスなしにして、2つ目の背景画像をパララックスありにしました。
2つ目のパララックスありの背景画像は、テキストと微妙にスクロールのズレがあることが分かると思います。
これがパララックス、つまり視差効果になります。
準備
まずはjQueryのCDNをbodyの閉じタグの直前に書きましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML
<!-- パララックスあり -->
<div class="first-v2" id="parallax-01">
<p>パララックスあり<br>パララックスあり</p>
</div>
背景画像をパララックスさせたい部分に「id=”parallax-01″」を指定します。
id名はなんでもOKですが、分かりやすい名前にすると後でコードを理解しやすいのでおすすめですよ。
CSS
// パララックスあり
.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
// 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を使って背景画像をパララックスさせる方法でした。
