ChatGPTにコード修正を依頼

パララックス効果。前に書いたコード。これだと1個1個増減しないといけない。数が合わないと動かない。のでGPTにお願いしてみた。

$(function () {

//各背景画像のtopの位置を取得
var bg1_top = $(".parallax_box01").offset().top;
var bg2_top = $(".parallax_box02").offset().top;

// ウィンドウの高さを取得
var win_h = $(window).height();

//各背景画像を動かすタイミングの位置を計算
var start_bg1 = bg1_top - win_h;
var start_bg2 = bg2_top - win_h;

$(window).scroll(function () {

//スクロール量
var y = $(this).scrollTop();

if(navigator.userAgent.match(/(iPhone|iPad|iPod)/i)){
//iosは何もしない
if (y >= start_bg1) {
    $('.parallax_box01').css('background-position-y');
}

if (y > start_bg2) {
    $('.parallax_box02').css('background-position-y');
}
    
} else {

//スクロール量と動かすタイミング位置を判定した場合は背景画像を動かす
if (y >= start_bg1) {
    $('.parallax_box01').css('background-position-y', -(y - bg1_top) * 0.1 + 'px');
}

if (y > start_bg2) {
    $('.parallax_box02').css('background-position-y', -(y - bg2_top) * 0.1 + 'px');
}
    
    }
});

});

改定（1）

//各背景画像のtopの位置を取得
var bg_top = $(".bg_parallax").offset().top;
// ウィンドウの高さを取得
var win_h = $(window).height();

//各背景画像を動かすタイミングの位置を計算
var start_bg = bg_top - win_h;

$(window).scroll(function () {

//スクロール量
var y = $(this).scrollTop();

if(navigator.userAgent.match(/(iPhone|iPad|iPod)/i)){
    //iosは何もしない
} else {
    //スクロール量と動かすタイミング位置を判定した場合は背景画像を動かす
    if (y >= start_bg) {
        $('.bg_parallax').css('background-position-y', -(y - bg_top) * 0.1 + 'px');
    }
}

});

不発。発火せず。

$(function() {
var $parallaxBoxes = $('.parallax_box');
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
$parallaxBoxes.each(function() {
var $el = $(this);
var top = $el.offset().top;
var height = $el.outerHeight();
if (top + height < scrollTop || top > scrollTop + $(window).height()) {
return;
}
var yBgPosition = Math.round((top - scrollTop) * 0.2);
$el.css('background-position', 'center ' + yBgPosition + 'px');
});
});
});

見事に解消！！！

そして、以前からいくつかのブラウザで動きがカクる現象があり、それも修正をお願いしたら、

$(function() {
  var $parallaxBoxes = $('.parallax_box');
  var rafId;
  
  function updateParallax() {
    var scrollTop = $(window).scrollTop();
    $parallaxBoxes.each(function() {
      var $el = $(this);
      var top = $el.offset().top;
      var height = $el.outerHeight();
      if (top + height < scrollTop || top > scrollTop + $(window).height()) {
        return;
      }
      var yBgPosition = Math.round((top - scrollTop) * 0.2);
      $el.css('background-position', 'center ' + yBgPosition + 'px');
    });
    
    // 再帰的に呼び出し、スムーズなアニメーションを実現する
    rafId = requestAnimationFrame(updateParallax);
  }
  
  // 初回実行
  updateParallax();
  
  // ウィンドウがリサイズされた場合、パララックスの値を再計算する
  $(window).on('resize', function() {
    $parallaxBoxes.each(function() {
      $(this).css('background-position', 'center top');
    });
  });
  
  // ウィンドウが非表示になる場合、requestAnimationFrameの処理を停止する
  $(window).on('blur', function() {
    cancelAnimationFrame(rafId);
  });
});

気持ち、細かな動きに解消。

全工程、検証を入れて10分程度。
実際のコード書き出しは10秒程度。
ヤバいな。デザイナーには嬉しい革命だな。

<div class="bg_parallax parallax_box parallax_box_01"></div>
<div class="bg_parallax parallax_box parallax_box_02"></div>

.bg_parallax {
  position: fixed;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
}

.parallax_box_01 {
  background-image: url('path/to/image1.jpg');
}

.parallax_box_02 {
  background-image: url('path/to/image2.jpg');
}

phpのエラーとか、タグの閉め忘れとか、ここに放り込んだら瞬殺で特定してくれる。
文句も言わず、黙々と改定してくれる。

よかったらスキお願いします m(_ _)m