Now Loading...
Web Creative｜Grid Visual
- 課題有り
背景にHTML要素でグリッドを描画するインタラクション。こやつの良いところは、bodyの高さいっぱいに自動で必要な分だけグリッドを挿入してくれるところ。グリッドアイテムの高さや1行あたりの個数もオプションで指定できるので、過不足なく必要な分のグリッドを描ける。
また、グリッドアイテムひとつずつは<span>タグになっているので、GSAP等と連携してアニメーションさせることも可能だ！
⚒️
【優先】現在画面に表示しているグリッドアイテムを特定
グリッドアイテムにアニメーションさせる場合は、今表示されている範囲内に限定しないとパフォーマンスにがく影響が出る。
⚒️
ホバーインタラクション
グリッドビジュアルは一番下の階層に挿入されるので、pointer-eventsは効かない。JavaScriptのポインターイベントで今ホバーされているグリッドアイテムを特定できるようにすれば、細かなインタラクションができそう。