#author("2024-12-24T09:09:44+09:00;2024-12-03T10:28:20+09:00","default:member","member") #author("2024-12-24T09:53:17+09:00;2024-12-03T10:28:20+09:00","default:member","member") *興梠 媛愛 [[通信ネットワーク演習]] ~ **演習 -Blank File : [[javascript_blank>https://k6-h7.github.io/javascript_blank/]] -Color Picker : [[javascript_color>https://k6-h7.github.io/javascript_color/]] -Loading Animation : [[javascript_loading>https://k6-h7.github.io/javascript_loading/]] -Color Change A : [[javascript_color>https://k6-h7.github.io/javascript_change_a/]] -Color Change B : [[javascript_color>https://k6-h7.github.io/javascript_change_b/]] -Gallery : [[javascript_gallery>https://k6-h7.github.io/javascript_gallery/]] -Text Animation : [[javascript_text_animation>https://k6-h7.github.io/javascript_text_animation/]] -Gallery2 : [[javascript_gallery2>https://k6-h7.github.io/javascript_gallery2/]] -Scroll : [[javascript_scroll>https://k6-h7.github.io/javascript_scroll]] -Map : [[javascript_map>https://k6-h7.github.io/javascript_map]] -Navigation：[[javascript_navigation>https://k6-h7.github.io/javascript_navigation]] ~ ~ **最終成果物 //&color(red){タイトル・公開URLの記入}; //***&color(red){タイトル}; //&color(red){https://www.example.com/}; ***Portfolio https://k6-h7.github.io/portfolio1/ ~ ***サイトの趣旨 //&color(red){これはどんなサイトか・・を簡潔に}; 制作物を掲載するポートフォリオサイト(枠組み) 今後ブラッシュアップしていく予定 ~ ***技法・技術情報 //&color(red){サイトで用いている技術や文法事項について記入}; //-&color(red){例）条件分岐（if/else）}; //-&color(red){例）イベント（click）}; -loadingアニメーション --条件分岐 ---初回のみローディングアニメーションを表示 --個別文字のアニメーション設定 ---同クラスを持つ各文字要素に、遅延を設定 --フェードアウト処理 ---ローディング画面全体を読み込み後非表示 -星空のアニメーション --ページ読み込み時に、ランダムな位置に指定した最大と最小の間の大きさの星が300個表示される --各星は異なるタイミングでアニメーションを開始する -文字・要素のアニメーション --フェードインアニメーション --Intersection Observer APIを使用しスクロールでアニメーションが動く設定 --一度アニメーションが実行されたら再度繰り返さないよう設定 -作品一覧ページのアニメーション --Gallery2 : [[javascript_gallery2>https://k6-h7.github.io/javascript_gallery2/]]の仕組みを使用 ~ ***先行事例・参考情報 //&color(red){先行事例の紹介、参考サイトなど}; -先行事例 -参考技術 --[[JSとCSSでキラキラ輝く星空エフェクトを実装する方法>https://web-dev.tech/front-end/javascript/twinkle-stars-effect/]] --[[css スクロールを促すアニメーション>https://photopizza.design/css_prompt_scrolling/]] -参考サイト --[[フクイジュリのポートフォリオ。>https://juri-portfolio.com]] ~ ~ **リンク ***公開リポジトリ //-GitHub：https : // github.com/johnsmith //&small(※リンクを無効にするため半角スペースを挿入しています。自分のページに掲載の際は、スペースを詰めてください。); -GitHub：https://github.com/k6-h7