Description sections#1縦スクロールで次のセクションを表示
画面の半分を図、もう半分をテキストにして、図とその説明を順番にしていくイメージ。
Description sections#2ページの途中にセクションが進むアニメーションを入れる
031, 032はページ全体を固定領域として置いていたが、今回はページの途中で固定となるように対応した。
- sec#1
- sec#2
- sec#3
- sec#4
section#1
Minim enim qui occaecat id irure magna esse duis anim consectetur ullamco qui nulla et. Cillum sint cupidatat cillum fugiat cupidatat nulla officia. Dolor excepteur nulla amet ullamco non officia et aliqua. Minim ullamco laboris exercitation ex culpa. Fugiat laboris qui ad dolore magna dolore incididunt ipsum in sint do pariatur adipisicing. Et dolor veniam aliqua mollit laboris cillum officia eiusmod. Exercitation elit ullamco culpa mollit quis ipsum esse.
section#2
Esse est labore laboris laboris irure sunt deserunt eu tempor adipisicing qui. Labore veniam proident dolore consequat. Ea ex sunt deserunt aliqua.
section#3
Nulla irure consectetur consequat occaecat. Proident qui commodo esse tempor fugiat. Sunt elit voluptate mollit nulla do consequat eiusmod in magna sint aute in duis. Duis non laboris ea quis. Proident ipsum incididunt consectetur eu Lorem do ad anim esse incididunt velit. Ullamco fugiat eu deserunt tempor quis. Ullamco anim est consequat incididunt velit consequat officia.
section#4
Eu exercitation minim mollit nulla id aliquip do ex. Duis cillum non excepteur labore excepteur ut aute pariatur eiusmod dolore consectetur aliqua. Aliqua consequat culpa ut non mollit dolore tempor sint.
The endここで終わり
031などと同じような仕組みと、position: sticky; を使用することでうまく構築できた。
今回は図表も更新するために、図表の方とセクションの方にdata属性で今アクティブなセクション番号のみをセットするようにして、
装飾・アニメーションは全てCSSに記載している。
円弧を描くアニメーションはclip-pathで実装したが、完全に綺麗に動かすならsvgにするのがベター。