Lightning G3 で Outer ブロックのパララックスが動作しなくなった

Lightning G3 で Outer ブロックの背景設定をパララックスにしてもパララックスの動作をしなくなっています。

パララックスのテスト

パララックスのテスト

パララックスのテスト

Lightning Pro でもパララックスは非保証の扱いで、フォーラムでもパララックスを廃止したい旨がベクトルさんから書き込まれていました。

カバー固定にすると

背景設定をカバー固定にするとこうなります。とりあえず、これで代用するのがいいですね。

パララックスのテスト

パララックスのテスト

パララックスのテスト

パララックスの代替方法

カバーブロックに背景画像を設定してパララックスを実装するやり方を紹介します。

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");
    });
});

上記の代替方法で作ったカバー画像がこれ ↓ です。

パララックスのテスト

パララックスのテスト

パララックスのテスト

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

Lightning / Katawara を使用したサイト制作は全国どこからでも承ります。遠方からのご依頼の場合、Zoom を使用して打ち合わせを行わせていただきます。

講習形式のホームページ制作サポートも行っています。
お客様ご自身でホームページを制作・カスタマイズする上で、むずかしい部分を講習形式でサポートいたします。制作を手伝ってもらうだけでなく、同時に制作スキルを身につけたいという方はお気軽にお問い合わせください。