「酒田工務店」コーポレートサイト工務店 ホームページ

担当範囲 | コーディング |
---|---|
制作期間 | 2日 |
使用ツール | HTML、CSS、jQuery、Sass |
依頼者 | - |
サイトURL | https://demosite-005.lemomo-works.com |
※デモサイトのユーザー名:lemomo、パスワード:lemomo
サイトのご紹介
コーディング練習で実装したサイトです。
プログラミングスクール卒のデザイナーさんが作成した架空の工務店デザインの実装を行いました。
デザイン以外の仕様(マウスホバーアクションやアニメーション)はサイトの雰囲気に合わせてオリジナルで追加実装しています。
また、ハンバーガーメニューのデザインに関してもデザイン上で指示がなかったため追加でデザインしています。
実装機能のご紹介
★スクロールアニメーション
可視領域に入るとコンテンツがフェードインで表示されます。各セクションごとに左右から表示されたり、下からフワッと浮き上がるような動きにしたりと雰囲気に合わせた実装をしています。
★ハンバーガーメニュー
スマートフォンサイズの画面では、右上のメニューアイコンでメニューの表示非表示ができます。
メニューの表示のされ方も左右からスライドさせたり、フェードインにしたりとさまざまな動きにできます。今回は動きを少なめに落ち着いた雰囲気にするためにフェードインを実装しました。