ランディングページ/ 動画・スライドショー
スマホ向けデザイン
パララックス
- メインビジュアル：全画面表示
- 背景画像：MENU、ABOUT、LOCATIONの背景画像は、PC時のみ固定で表示
- ABOUTボタン：ホバー時に枠線で囲みます。CSSで表現。
- LOCATION：Googlemapの埋込。グレー表示になるようCSSで設定。
固定サイドメニュー
- 動画：全幅で背景に固定
- 特徴のボタン：3つの円はリンクにして、ホバー時は左から右にスライドするよう背景色を変更
- 問い合わせ：ホバー時は枠線を太く「3px」にする
- ブレークポイント：「960px」スマホ時はヘッダーを上部に固定
縦書きレイアウト
- メイン画像はPCとスマホ表示で切り替え
- お知らせ：PC表示は5件、スマホ表示は3件に切り替え
- ブレークポイント：768px
CSS：animation
- メインビジュアル：CSSアニメーションでフェードで切り替え。
- BBBが選ばれる理由：「オンライン対応」を左からスライド、「講師はネイティブ」を右からスライド表示
- 受講生の声：非表示の状態から、少しづつ大きくなるようにふわっと表示
- スクールの概要：背景画像のドット柄を右上から左下へ繰り返し流す
- ブレークポイント：900px
CSS：transform
- メインビジュアル：CSSアニメーションでフェードで切り替え
- BBBが選ばれる理由：「オンライン対応」を左からスライド、「講師はネイティブ」を右からスライド表示
- 受講生の声：非表示の状態から、少しづつ大きくなるようにふわっと表示
- ブレークポイント：900px