[ 解決済 ] カバーブロックでのパララックスについて

[gundam]

■ WordPress のバージョン
6.1.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.2.0

■ Pro Unit のバージョン
0.23.4

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
カバーにて追加CSSを設定し
javascriptにてパララックスをしていたのですが
気がついたら、通常の固定背景になってしまいました。

何が原因なのでしょうか？

別PCで更新をストップしてあったバックアップ用のデータでは
きちんと動作していました。
一つずつプラグイン（VK等）、更新をかけていったのですが
きちんと動作。

訳がわからず
該当の固定ページを編集モードで開き、何も変更せずに保存して閉じると
動作しなくなりました。

CSS
background-attachment: fixed;
background-position: 10% 0;

javascript
(function ($) {
var parallax = -0.85;
var $bg_images = $(‘.cover-parallax’); //パララックス効果を与えるクラスを指定

// $(window).scroll(function() {
$(window).on(‘load scroll resize’, function () {
var offset_tops = [];
var clientHeights = [];

$bg_images.each(function (i, el) {
offset_tops.push($(el).offset().top);
clientHeights.push($(el).outerHeight());
console.dir($(el).offset().top);
});

$bg_images_visual.each(function (i, el) {
offset_tops.push($(el).offset().top);
clientHeights.push($(el).outerHeight());
console.dir($(el).offset().top);
});

var dy = $(this).scrollTop();

$bg_images.each(function (i, el) {
var ot = offset_tops[i];
var slideHeight = (ot – dy) / 4 * parallax;
$(el).css(‘background-position’, ‘center ‘ + slideHeight + ‘px’);
});

});
})(jQuery);

■ 自分で試した事
別PCで更新をストップしてあったバックアップ用のデータでは
きちんと動作していました。
一つずつプラグイン（VK等）、更新をかけていったのですが
きちんと動作。

■ 症状が発生するブラウザ
safari

■ 実際の症状
何が原因なのでしょうか？

別PCで更新をストップしてあったバックアップ用のデータでは
きちんと動作していました。
一つずつプラグイン（VK等）、更新をかけていったのですが
きちんと動作。

訳がわからず
該当の固定ページを編集モードで開き、何も変更せずに保存して閉じると
動作しなくなりました。

[うなこ]

VK blocks Proのバージョンはいくつをご利用でしょうか
（現時点の最新は 1.47.1.0になります）

• この返信は1年、 4ヶ月前にうなこが編集しました。

[gundam]

うなこ様
ありがとうございます。
最新のバージョン 1.47.1.0
に、なります。

[石川＠Vektor,Inc.]

カバーブロックはWordPressコアのブロックで、
それについて独自に追加した js が動作しなくなったという事なので、
おそらくカバーブロックの HTML がWordPressのバージョンアップでかわったとか、カバーブロックの背景に指定する設定の変更により出力されるHTMLやクラスが初期の状態と異なるようになったとかそういう類だと思います。

現状実際に出力されるHTMLに対応した JavaScript のコードになっているのか改めて見直してみてください。

[gundam]

大変遅くなり申し訳ございませんでした。
正月休みを使い試行錯誤しましたところ
追加CSSクラスを消して
has-parallax
に対してjavascriptでなんとか動作いたしました。

遅くなりましたこと、深くお詫びいたします。
ありがとうございました。

[投稿者]

投稿