scrawl
2021.1
scroll + crawl
概要
「scrawl」はページスクロールに連動するクロールのアニメーションです。スクロール（scroll）とクロール（crawl）を合わせて命名しました。
試したこと
- Next.jsでのページスクロール管理
ページスクロールに連動するNext.jsプロジェクトの習作として制作しました。
もともとは検証のためだけのページで公開の予定はなかったのですが、思いの外、クロールのイラストがいい感じに描けたので公開に至りました。
無限に泳ぎ続けられるように、ページの最下部までスクロールした際に最上部までワープさせ、無限スクロールを実現しています。
考えたこと
- iOSにおける無限スクロール
window.scrollTopを監視しながら、うまいことwidow.scrollToでスクロール位置をワープさせることで、割と簡単に無限スクロールを実装できると思ったのですが、実際に実装してiOSで確認してみると、ひと工夫しないとうまくいかないことがわかりました。
様々な工夫を試し、考え、作ってみた結果「scrawl」は生まれました。
しかし、どんなサイトにでも導入できる工夫ではない為、「kimizuka.fm」には導入できず、全く違う無限スクロールの仕組みを作りました。
無限スクロール実装の試行錯誤はまだまだつづきます。