「酒田工務店」コーポレートサイト | Portfolio-lemomo
TOP  >  制作実績  >  「酒田工務店」コーポレートサイト

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

担当範囲コーディング
制作期間 2日
使用ツールHTML、CSS、jQuery、Sass
依頼者-
サイトURLhttps://demosite-005.lemomo-works.com
           

※デモサイトのユーザー名:lemomo、パスワード:lemomo

サイトのご紹介

コーディング練習で実装したサイトです。
プログラミングスクール卒のデザイナーさんが作成した架空の工務店デザインの実装を行いました。
デザイン以外の仕様(マウスホバーアクションやアニメーション)はサイトの雰囲気に合わせてオリジナルで追加実装しています。
また、ハンバーガーメニューのデザインに関してもデザイン上で指示がなかったため追加でデザインしています。

実装機能のご紹介

★スクロールアニメーション
可視領域に入るとコンテンツがフェードインで表示されます。各セクションごとに左右から表示されたり、下からフワッと浮き上がるような動きにしたりと雰囲気に合わせた実装をしています。

★ハンバーガーメニュー
スマートフォンサイズの画面では、右上のメニューアイコンでメニューの表示非表示ができます。
メニューの表示のされ方も左右からスライドさせたり、フェードインにしたりとさまざまな動きにできます。今回は動きを少なめに落ち着いた雰囲気にするためにフェードインを実装しました。

他にもこんなサイトを担当しました