サイトのご紹介

FLOCSSでの実装を想定してプログラミングスクールで配布されているLPデザインカンプを題材にコーディングしました。
サイトを長く運用することを踏まえて、運用・メンテナンスしやすいようサイトを構築しております。

デザインの指示でシンプルでアニメーションを控えめにということでしたので、全体的に動きは少なく実装しております。
ちなみにjQueryで動きを実装した箇所としては、ローディングアニメーションやハンバーガーメニュー、アンカーリンクやページトップリンクのスムーススクロールになります。

実装機能のご紹介

★ローディングアニメーション
サイト自体にはアニメーションを少なめに実装しましたので、少しデザイン性やメインカラーを意識させる目的でローディングアニメーションを実装してみました。

★スマホメニュー（ハンバーガーメニュー）
ハンバーガーメニューをタップすると上部からメニューが現れるよう実装しております。

★ページトップリンク
特定の位置までスクロールを進めると右下にトップへ戻るボタンが出現するよう実装しました。
細かな配慮ではありますが、フッターのSNSリンクなどに被らないよう位置を制御しております。

★スムーススクロール
グローバルメニューやページトップリンクをクリックしたときに、目的のセクションまでの動きにアニメーションを実装しております。