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