#author("2023-12-25T14:38:34+09:00","default:member","member") #author("2023-12-25T14:42:18+09:00","default:member","member") *吉良 琉汰 [[通信ネットワーク演習]] ~ **演習 -Blank File : [[javascript_blank>https://kirakr.github.io/javascript_blank/]] -Color Picker : [[javascript_color>https://kirakr.github.io/javascript_color//]] -lodinganimation : [[javascript_loading>https://kirakr.github.io/loadinganimation/]] -Gallery : [[javascript_gallery>https://kirakr.github.io/javascript_gallery/]] -textanimation : [[javascript_text_animation>https://kirakr.github.io/javascript_text_animation/]] -Gallery2 : [[javascript_gallery2>https://kirakr.github.io/javascript_gallery2/]]~ -scroll : [[javascript_scroll>https://kirakr.github.io/javascript_scroll/]]~ -map : [[javascript_map>https://kirakr.github.io/javascript_map/]]~ -navigation:[[jjavascript_navigation>https://kirakr.github.io/javascript_navigation//]] **最終成果物 ***アクアリウム時計 -完成サイト：https://kirakr.github.io/javascript_watch/ -完成サイト（推奨ブラウザchrome)：https://kirakr.github.io/javascript_watch/ -ソースコード：https://github.com/kirakr/javascript_watch ~ ***サイトの趣旨 ブラウザ上で使用する事ができるシンプルな時計が欲しいと思い、時計だけが表示されるサイトを作成しました。背景にはGoogle Driveにアップした水槽の動画を使用し、まるでアクアリウムのように使用できる置き時計をコンセプトに設計しています。ただ、背景動画を読み込むのには時間がかかるため、ロードアニメーションを追加しました。また、ブラウザ上ではタブやアドレスバーが表示されるため、時計を表示する際に邪魔になるので、左上の拡大アイコンをクリックするとフルスクリーンに、縮小アイコンを押す事でフルスクリーンが解除されるようにしました。 ~ ***技法・技術情報・参考情報 [[日時情報の取得(clock)>https://web-dev.tech/front-end/javascript/digital-clock/]] [[フルスクリーン>https://gray-code.com/javascript/display-the-page-in-full-screen/]] [[ロードアニメーション(load)>https://nagashima.kyusan-u.ac.jp/note/loading-animation/]] [[背景素材>https://pixabay.com/ja/videos/%E9%AD%9A-%E9%AD%9A%E3%81%AE%E6%B0%B4%E6%A7%BD-%E7%B7%91-%E9%9D%92-%E3%82%A8%E3%83%93-133870/]] ~ **リンク ***公開リポジトリ -GitHub：https://github.com/kirakr