フロントページにパララックス効果を付ける

2018年6月11日
カスタマイズ

フロントページにパララックス効果を付ける方法を紹介します。

パララックス効果とは、
スクロールに応じて背景画像が切り替わることをいいます。

この効果はPCでのみ動作します。
スマホ、タブレットでは表示されませんのでご注意ください。

フロントページにパララックス効果を付ける手順

カスタムHTMLウィジェットをフロントページに追加

まず、フロントページのパララックス効果を出したい部分に
カスタムHTMLウィジェットを追加します。

表示したい分だけいくつでも追加していただいて構いません。

HTMLウィジェットにHTMLを記述します。

以下のコードをコピーしてください。
数字の部分のみ枚数に応じて変更します。

<div class="parallax para-image1"></div>

カスタマイザーでCSSを追加

外観 ⇒ カスタマイズ ⇒ 追加CSS に以下のCSSを追加します。

先のHTMLで書いた数字に応じてCSSを追加してください。

@media only screen and (min-width: 768px) {
.parallax {
width: 100%;
height: 1000px;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
z-index: 1;
}
.para-image1 {
background-image: url(画像URL);
}
.para-image2 {
background-image: url(画像URL);
}
.para-image3 {
background-image: url(画像URL);
}
.para-image4 {
background-image: url(画像URL);
}
}

これでパララックス効果が実装できます。