パララックスを設定するために以下のようにしてあります。
1.カバーの 追加CSSクラス に cover-parallax を指定する。
2.以下のスタイルを追加する。
.cover-parallax { background-attachment: fixed; background-position: 50% 0; }
3.JavaScript に以下の行を追加する。
var parallax = -0.5; var $bg_images = $(".cover-parallax"); var offset_tops = []; $bg_images.each(function(i, el) { offset_tops.push($(el).offset().top); }); $(window).scroll(function() { var dy = $(this).scrollTop(); $bg_images.each(function(i, el) { var ot = offset_tops[i]; $(el).css("background-position", "50% " + (dy - ot) * parallax + "px"); }); });


カバー画像にパララックスを設定
この部分は、カバーに PR Content を入れて作ってあります。


カバー画像(全幅)にパララックスを設定
この部分もカバーに PR Content を入れて作ってありますが、カバーを全幅に設定してあります。
PR Content の幅が広くならないように、カスタムCSSに以下のスタイルを追加してあります。
.alignfull {
padding-left: calc(50vw – 50%);
padding-right: calc(50vw – 50%);
}


カバー画像(全幅) パララックスなし
この部分は、カバーに PR Content を入れて作ってありますが、カバーを全幅に設定してあります。
PR Content の幅が広くならないように、カスタムCSSに以下のスタイルを追加してあります。
.alignfull {
padding-left: calc(50vw – 50%);
padding-right: calc(50vw – 50%);
}