• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 興梠媛愛/通信ネットワーク演習 へ行く。
  • 1 (2024-10-29 (火) 10:27:15)
  • 2 (2024-12-03 (火) 10:28:20)
  • 3 (2024-12-03 (火) 10:28:20)

---

興梠 媛愛

通信ネットワーク演習

演習

• 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を使用しスクロールでアニメーションが動く設定
  • 一度アニメーションが実行されたら再度繰り返さないよう設定
    
    

先行事例・参考情報

• 先行事例
  • JSとCSSでキラキラ輝く星空エフェクトを実装する方法
  • css スクロールを促すアニメーション

• 参考サイト
  • フクイジュリのポートフォリオ。
    
    
    
    

リンク

公開リポジトリ

• GitHub：https://github.com/k6-h7