本文のダミーです。読み始めると画面の上端に細い帯が現れ、スクロールした量に合わせて右へ伸びていきます。
段落のダミーです。ここでは文章の長さを本物の記事に近づけ、帯がどの位置で何割まで進んでいるかを確かめられるようにしています。
09
Scroll-linked animation
スクロール量に合わせて進む(読了バー)
SCROLL ↓
Section 1
本文のダミーです。読み始めると画面の上端に細い帯が現れ、スクロールした量に合わせて右へ伸びていきます。
段落のダミーです。ここでは文章の長さを本物の記事に近づけ、帯がどの位置で何割まで進んでいるかを確かめられるようにしています。
Section 2
本文のダミーです。見出しや段落の高さは、実際の読み物を想定して少しずつ変えてあります。
段落のダミーです。スクロールを止めれば帯も止まり、戻せば帯も戻ります。時間ではなく、位置だけで決まる動きです。
Section 3
本文のダミーです。文章の途中で読むのをやめた人にも、どこまで読んだかが一目で伝わります。
段落のダミーです。ここでは中立な文だけを置いています。
Section 4
本文のダミーです。読了の目安として、帯の長さが全体の進み具合と揃っていることを確かめてください。
段落のダミーです。本文の行間は 1.7 で、幅は 1080px を超えません。
Section 5
本文のダミーです。段落が続くと、帯は少しずつ、着実に伸びていきます。
段落のダミーです。ひとつの節が長くても、帯の進みは一定です。
Section 6
本文のダミーです。中盤に入り、残りの長さを感じ取れるのがこの帯の役目です。
段落のダミーです。ここでも説明は必要最小限にしています。
Section 7
本文のダミーです。終わりが近づくと、帯はほとんど右端に届いています。
段落のダミーです。残りの段落は、あと一節だけです。
Section 8
本文のダミーです。最後の段落まで読み終えると、帯は右端いっぱいに伸びきります。
段落のダミーです。これで本文は終わりです。