セクション
ページを読み進める途中で、内容の区切りを印象づけるセクションの演出です。スクロールに合わせて図を固定したまま段階ごとに切り替える動きや、大きな文字を塗っていく動きを、デモとコードで紹介しています。
セクションのインタラクション（23件）
-
-
作品の画像が石積みの格子へ上から落ちて収まり、隙間なく並ぶ
-
お知らせの一覧が日付と区分のラベルつきで順に現れ、行に重ねると矢印が伸びる
-
スクロールで比較表のセクションの行が順に立ち上がり、丸とチェックが線で描かれる
-
工程のセクションでカードが重なった束から扇状に広がって並ぶ
-
地図のセクションで拠点のピンが順に落ちて立ち、弧で結ばれる
-
スクロールでセクションの見出しが左右から寄って一文になる
-
スクロールでロードマップのセクションに道が描かれ、マーカーが線に沿って進む
-
スクロールでセクションの奥・中・手前の図形が違う速さで流れる（パララックス）
-
スクロールでセクションのリストの行が、罫線を引きながら左から順に滑り込む
-
料金表のセクションで列が順に立ち上がり、おすすめの列が一段高くなる
-
ページ末の呼びかけのセクションで、見出しがスクロールに合わせて大きく迫り、ボタンが現れる
-
口コミのセクションで、カードが縦 3 列に並び、交互の向きに流れ続ける
-
機能紹介のセクションでタブが自動で進み、進捗の線が満ちると次の図に切り替わる
-
スクロールの向きに合わせて、セクションを横に流れる大きな文字が向きを変え、速さも増す
-
セクションの取引先ロゴの壁が、1 枚ずつ縦にめくれて入れ替わり続ける
-
スクロールでセクションのベントグリッドのタイルが順に現れる
-
スクロールでセクションの見出しと段落が行ごとに現れる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。