URL
担当と制作時間
企画と構成（1時間）・素材作成（2時間）・デザイン作成（1時間）・コーディング（4時間）
コーディングについて
JavaScript/jQueryを用いて人の目を惹く動きのあるデザインを実装できるようになる第一歩として作成したページです。フロントエンドの開発に深く興味を持っており、将来は、デザインからその実装をシームレスに行うことができるフルスタック人材を目指しています。そのため、いち早く様々な技術に触れていきたいと考え、今回はまずデザインから考えることであえて今までに使ったことがない技術を学び実装できるようにしました。
浮き輪の上下のアニメーションが繰り返し行われるように、関数とsetTimeoutを用いています。さらに、クリックでオブジェクトがfadeOutするようにその際に上下に動くアニメーションが停止するよう処理を入れています。また、プールの領域内にのみjQueryプラグインのripplesが反映されるようcanvasを設定しました。ripplesプラグインとプールの画像、浮き輪の画像のレイヤー関係を注意してコーディングを行っています。