スクロール時に紙芝居の様な挙動をJsを使用せず実装したい

サイトトレースをしていてもっとスマートに出来ないかと思っております。

https://www.kiyasuya.jp/
上記の参考URLの様に、スクロールすると一枚一枚が上に捲れるような動きをトレースしており、Jsの制御で近しいものは出来たものの、cssだけで再現出来ないかと試行錯誤しております。

https://codepen.io/ugokuweb/pen/OJWRMEQ
参考の様に、position: stickyを使用してみてもうまく実現できませんでした。

Jsの制御はIntersection Observer APIを使用して出来ている状態です。
もっとシンプルに出来るような組み合わせやプロパティ等があればお教えいただきたいです。
また、良いライブラリ等もあれば教えてほしいです。

2023/04/27 05:19

CSSだけでは難しいと思います

2023/04/27 06:06

なるほど、回答ありがとうございます。その後もいろいろ試してみましたが、限界そうでしたのでクローズします。

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

回答1件

自己解決

Jsで制御しましょう(自戒)

投稿2023/04/27 06:08

総合スコア47

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問をすることでしか得られない、回答やアドバイスがある。