使用技術
- React - コンポーネントベースのUI構築
- GSAP - スクロールアニメーション制御
- CSS - 視覚効果の記述
制作意図
- Reactのコンポーネント設計を学ぶ
- GSAPのタイムライン機能を使う
- スクロール連動アニメーションの実装方法を学ぶ
こだわりポイント
- スムーズな画面切り替え
- 画面遷移時の印象的なアニメーション
- CSSによる視覚効果の演出
ソースコード
HTMLの解説
概要:
- standardなHTML5の構造
- headにCSSとタイトル設定
- bodyにid=rootのdivを配置
- Reactとgsapの読み込み
- scriptでJSを読み込み
コード解説:
- doctype宣言、htmlタグでHTML5を定義
- headタグ内にmeta、title、CSSの読み込み
- bodyタグ内にid=rootのdivを配置
- ここにReactのルートコンポーネントをマウント
- React、ReactDOM、gsapのライブラリを読み込み
- scriptでJavaScriptファイルを読み込み
要点:
- 標準的なHTML5の構造
- headで外部リソースの読み込み
- bodyにReactのマウント用div
- ライブラリとJSの読み込み
この標準的なHTMLで、ReactとJavaScriptによる動的なUIを構築できます。
CSSの解説
- Google Fontsからフォントをインポート
- aタグにリンクスタイルを設定
- bodyにグローバルスタイルを設定
- h2タグに見出しスタイルを設定
- headerにヘッダーのスタイルを設定
- .sectionクラスに各セクションの共通スタイルを設定
- .backgroundクラスに背景画像を設定
- .first~.fifthクラスにそれぞれのセクションの背景画像を設定
- メディアクエリを用いてレスポンシブデザイン
主な処理は以下の通りです:
- フォントのインポート
- リンクのスタイル設定
- グローバルのスタイル設定
- セクション共通のスタイル設定
- 各セクションの背景画像設定
- レスポンシブデザインの設定
このCSSにより、スムーズに画面切り替えができるWebページのビジュアルが実現されています。
JavaScroptの解説
このJavaScriptコードは、スクロールで画面を切り替えるサンプルです。
概要:
- document.querySelectorAllで要素を取得
- gsapを使ってアニメーション設定
- gotoSection関数で画面切り替えを定義
- スクロールやクリックでgotoSectionを呼び出し
- Reactでコンポーネント定義
解説:
- document.querySelectorAllで
.sectionや.backgroundなどの要素を取得 - gsap.timelineでアニメーションを定義
- 現在の画面をフェードアウト
- 次の画面をフェードイン
- gotoSection関数で画面切り替え
- indexを更新して画面を指定
- tlにアニメーションを設定
- スクロールやタップでgotoSectionを呼び出し
- ReactのSectionコンポーネントで画面定義
- AppコンポーネントでSectionを並べてアプリを構成
要点:
- document.querySelectorAllで要素を取得
- gsap.timelineでアニメーション設定
- カスタム関数で画面切り替えを定義
- イベントで切り替え関数を呼び出し
- Reactでコンポーネントベースで構成
まとめ:
このランディングページは、ReactとGSAPを組み合わせることでインタラクティブなスクロールアニメーションを実現しています。
Reactのコンポーネントベースの設計により、画面の切り替えをスムーズに実装できています。各セクションをコンポーネントとしてカプセル化し、順に並べることでアプリケーションを構築しています。
GSAPのタイムライン機能を使うことで、スクロールやクリック時のアニメーションを細かく制御できています。現在の画面のフェードアウトと次の画面のフェードインを平行しており、 waitを活用することでアニメーションの視覚効果を高めています。
加えてCSSによる背景画像と視覚効果の設定も、ランディングページの完成度を高めるうえで重要な要素となっています。
ReactとGSAP、CSSを組み合わせることで、よりインタラクティブで洗練されたランディングページが制作できることが分かります。スクロールアニメーションの実装は、ウェブデザインにおいて重要な技術の一つといえます。