セクション
ページを読み進める途中で、内容の区切りを印象づけるセクションの演出です。スクロールに合わせて図を固定したまま段階ごとに切り替える動きや、大きな文字を塗っていく動きを、デモとコードで紹介しています。
セクションのインタラクション（29件）
-
-
機能紹介のセクションでタブが自動で進み、進捗の線が満ちると次の図に切り替わる
-
スクロールの向きに合わせて、セクションを横に流れる大きな文字が向きを変え、速さも増す
-
セクションの取引先ロゴの壁が、1 枚ずつ縦にめくれて入れ替わり続ける
-
スクロールでセクションのベントグリッドのタイルが順に現れる
-
スクロールでセクションの見出しと段落が行ごとに現れる
-
スクロールでセクションの年表の線が伸び、項目が順に現れる
-
スクロールでセクションに合わせて背景色と文字色が切り替わる
-
セクションの本文の語にマーカーが引かれる
-
スクロールでセクションの図が固定され、段階ごとに切り替わる
-
スクロールでセクションの大きな文字が左から塗られていく
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。