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

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

実現したいこと

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

試したこと

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

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

コメントを投稿

0 コメント