#author("2025-01-07T23:53:06+09:00","default:member","member") #author("2025-01-07T23:56:29+09:00","default:member","member") *原 朋恵 [[通信ネットワーク演習]] ~ **演習 -Blank File : [[javascript_blank>https://mochinamako.github.io/javascript_blank/]] -Color Picker : [[javascript_color>https://mochinamako.github.io/javascript_color/]] -Loading Animation : [[javascript_loading>https://mochinamako.github.io/javascript_loading/]] -Color Change A : [[javascript_change_a>https://mochinamako.github.io/javascript_change_a/]] -Color Change B : [[javascript_change_b>https://mochinamako.github.io/javascript_change_b/]] -Gallery : [[javascript_gallery>https://mochinamako.github.io/javascript_gallery/]] -Text Animation : [[javascript_text_animation>https://mochinamako.github.io/javascript_text_animation/]] -Gallery2 : [[javascript_gallery2>https://mochinamako.github.io/javascript_gallery2/]] -Scroll : [[javascript_scroll>https://mochinamako.github.io/javascript_scroll/]] -Map : [[javascript_map>https://mochinamako.github.io/javascript_map/]] //-Navigation : [[>]] ~ ~ **最終成果物 //&color(red){タイトル・公開URLの記入}; //***&color(red){タイトル}; ***ダンゴムシのあそびば [[https://mochinamako.github.io/dangomushi-asobiba//]] ~ ***サイトの趣旨 ダンゴムシの可能性を広げる方法を模索する中で生まれたサイトです。 「ダンゴムシはかわいい」をモットーに、ダンゴムシを愛でたいという思いのもと制作しました。 //-ミニゲーム -ダンゴムシについての簡単な解説 -写真のギャラリー といった内容を含みます。 //&scale(80){＊サイト内で写真が表示されるページがあります。虫が苦手な方はご注意ください。}; //&color(red){これはどんなサイトか・・を簡潔に}; ~ ***技法・技術情報 //P5.js を活用し、インタラクティブな表現を行いました。 -ローディングアニメーション -マウスストーカー //スライドショー -繰り返し処理（for文） //-&color(red){例）条件分岐（if/else）}; //-&color(red){例）イベント（click）}; ~ ***先行事例・参考情報 -[[6666666 - マウスストーカーの作り方を解説（Vanilla JSで）>https://www.6666666.jp/blog/post/20220210/]] 上記サイトの記述をほぼ丸ごと利用させていただきました。 -[[『1冊ですべて身につくJavaScript入門講座』>https://www.sbcr.jp/product/4815615758/]]Mana, SBクリエイティブ, 2023 「ギャラリー」ページ作成の際、参考にしました。 //[[Swiper>https://swiperjs.com/]]（Javascriptプラグイン） //&color(red){先行事例の紹介、参考サイトなど}; ~ ~ **リンク ***公開リポジトリ -GitHub：https://github.com/mochinamako?tab=repositories#:~:text=Repositories,45 -GitHub：https://github.com/mochinamako //&small(※リンクを無効にするため半角スペースを挿入しています。自分のページに掲載の際は、スペースを詰めてください。);