スクロール量に連動したアニメーションを実装する中で詰まっています

【教えてもらいたいこと】
プログラミング/フロントエンド JavaScript jQuery HTML/CSS

【利用目的】
技術的な質問・相談

【具体的な相談内容】
タイトルの通り、「スクロール量に連動したアニメーション」を実装している中で、詰まっています。

下記のような記事を参考にして、
jQueryを使って実装しています
https://kakechimaru.com/scroll_interlocking/

主に作りたい体験
・該当セクションに来たら、実際のスクロールよりも要素（background-image）のスクロールを遅らせる（実際にスクロールしている量の割に、要素がスクロールされる量が小さくする、ブレーキがかかるようなイメージ）
・その上で、画像を4枚ほどフェードイン・フェードアウトを繰り返す

詰まっているポイント
・background-imageを使っているため、background-positionをスクロール量に応じて少しだけ大きくすることで、画面上は下にスクロールしているのに、該当要素は親要素から少しずつ離れていくため、遅れてスクロールされることが実現できると考えた
→　しかし、スクロールするたびに画像が上下にブレるようになってしまうのが解消できない

以下の方法をとっても、スクロールするときに上下にブレる現象は直らず
・該当要素をfixed配置にした上で、topの高さをスクロール量に変動させる
・translateYを使って、スクロール量に変動させて少しずつ下に動かす

スクロール量に連動したアニメーションの実装経験のある方、アドバイスいただけますと幸いです。
以上、何卒よろしくお願いいたします。

【希望相談スタイル】
技術的な質問・相談, ロードマップ・学習法相談

【目安予算】
15000円