Webサービス ランディングページ | Portfolio-lemomo
TOP  >  制作実績  >  Webサービス ランディングページ

Webサービス ランディングページLPサイト

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

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

サイトのご紹介

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

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

実装機能のご紹介

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

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

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

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

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