パララックスのコーディングについて

レスポンシブのコーディングについて今添付のようなデザインをコーディングしています。
(※添付はテストとしてデザインしてます。)

このような感じのデザインをレスポンシブで制作します。
理想系は下記のページのような
多層的に重なり、かつスクロール時の縦移動の速度が異なる形を再現したいです。
http://coscos.me
https://lapericum.com/?fbclid=IwAR3vIbxkj5__CdEXLR77kc_GwK9pqfFukVWtjLKyPSmLLI_L9UJnWyqw2dw

最悪見た目として多層的な表現を再現できればいいと考えています。

多分こういうデザインを「パララックス表現」というと思うのですが、
これを再現する参照サイトなどを見つけることができませんでした。
パララックスで検索すると大抵下記のような全画面表示のパネルが移動するような
参考サイトが出てきます。
https://ianlunn.co.uk/plugins/jquery-parallax/

自分が再現したい表現は、ひょっとするとこういうデザインはパララックスとは別ものかもしれませんが。。
こういうデザインをコーディングする時はz-index、absoluteを駆使して手で組んでいくのでしょうか。
それとも、jquery等既存のサービス（？）を使って制作するのでしょうか、
もしくは何らかのアプリ(アドビの〇〇のような)を使って制作するのでしょうか。
手で一から組み上げていくと、レスポンシブのことも考えないといけないので、
とても労力がかかってしまいそうで、尻込みしています。

最近のコーディングのトレンドを理解していないので、
感覚としては、
〇〇の公式を使えばもっと素早くできるものを、こちらは足し算・引き算を使って、一個ずつ計算して
答えに辿りついてるのかなという感覚ですが、いかがでしょうか。

こういう多層的なデザインをコーディングをする時、
どういう考え方でコーデイングする、どういアプリを使って制作するなど、
アイデアのアドバイスをご助力ください。

／／／／／／／／／／／／／／／／／／／／／／／／／／／

追記：
アニメーション部分に関して、各ご返答ありがとうございます。
その手前の段階の話となってしまうのですが、
参考であげたデザインを再現の再現についてもアドバイスいただきたいです。

各センテンスごとに

<div class="s_box"> <div class="p1"><img></div> <div class="p2"><img></div> <p class="w1"><img></p> </div> のような構造で組むと思うのですが、 s_box内に各要素をabsoluteでレイアウトして組むのでしょうか。またその場合、各要素がレスポンシブで可変ですが、親のs_boxの高さはどうやって高さ設定するのでしょうか。通常だと、子要素がabsoluteのみだと高さが0のままなので、どう解決するのがベターでしょうか。

ご確認お願いいたします。

行動規範の内容に同意します

回答3件

ひとつめのサイトはGSAPを使っているようです。

このページが参考になるのでは。
【2020年最新】GSAPの「ScrollTrigger」を使って爆速でスクロールアニメを実装する - to-R Media

ふたつめのサイトはluxy.jsを使っているようです。

以前に使ってみた感じ、簡単にパララックス効果を出せるのでお手軽に使うのには向いていると思います。
複雑な動作をさせるのは難しいですし、他のプラグインとも衝突しやすいです。
慣性スクロールとパララックスエフェクトのVanilla.jsプラグイン「Luxy.js」作ってみた | Will Style Inc.｜神戸にあるウェブ制作会社

投稿2020/09/12 01:37

編集2020/09/12 03:34

Lhankor_Mhy

総合スコア36087

ベストアンサー

http://coscos.me/は、要素が見える範囲に入ったら、CSSアニメーションでフェイドインさせつつ上に移動させてますね。パララックスとはちょっと違うと思います。

css
1.move {
2   transition-property: opacity,transform;
3   transition-duration: .5s;
4   transform: translate(0,40px);
5   opacity: 0;
6}
7.move.show {
8    transform: translate(0,0);
9    opacity: 1;
10}