興梠 媛愛
演習
- Blank File : javascript_blank
- Color Picker : javascript_color
- Loading Animation : javascript_loading
- Color Change A : javascript_color
- Color Change B : javascript_color
- Gallery : javascript_gallery
- Text Animation : javascript_text_animation
- Gallery2 : javascript_gallery2
- Scroll : javascript_scroll
- Map : javascript_map
- Navigation：javascript_navigation
最終成果物
Portfolio
https://k6-h7.github.io/portfolio1/
サイトの趣旨
制作物を掲載するポートフォリオサイト(枠組み)
今後ブラッシュアップしていく予定
技法・技術情報
- loadingアニメーション
- 条件分岐
- 初回のみローディングアニメーションを表示
- 個別文字のアニメーション設定
- 同クラスを持つ各文字要素に、遅延を設定
- フェードアウト処理
- ローディング画面全体を読み込み後非表示
- 条件分岐
- 星空のアニメーション
- ページ読み込み時に、ランダムな位置に指定した最大と最小の間の大きさの星が300個表示される
- 各星は異なるタイミングでアニメーションを開始する
- 文字・要素のアニメーション
- フェードインアニメーション
- Intersection Observer APIを使用しスクロールでアニメーションが動く設定
- 一度アニメーションが実行されたら再度繰り返さないよう設定
- 作品一覧ページのアニメーション
- Gallery2 : javascript_gallery2の仕組みを使用
- Gallery2 : javascript_gallery2の仕組みを使用
先行事例・参考情報
- 参考サイト
リンク
公開リポジトリ
- GitHub：https://github.com/k6-h7