輸入車専門店の架空サイト

OVERVIEW

WordPress教材の課題です!デザインカンプから静的コーディングを行い、WordPress化しました!

YEAR 2023

サイトURL

https://sakamaki.tech

※閲覧の際は下記のユーザー名とパスワードを入力してください。

Basic認証

ユーザー名、パスワードともに
user-1150

実装概要

  • ファーストビューのスライダーアニメーション
  • 横から文字が流れてくるアニメーション
  • ボタンホバー時の矢印のアニメーション
  • 各記事が上からフワッと出てくるアニメーション
  • 各記事ホバー時のタイトルに下線を引くアニメーション
  • 下層ページで画像とタイトルがずれて出現するアニメーション
  • Aboutページ
    • 画像無限スクロール
    • Company Profileセクションをカスタムフィールドとして実装
  • Worksページ
    • カスタム投稿一覧ページとして実装
    • 実績の種類別(タクソノミー別)のページも実装
  • お問い合わせページ
    • Contact Form 7、Contact Form 7 Multi-Step Formsを使って確認ページ、完了ページも実装

気を付けて制作した箇所

  • ピクセルパーフェクト
  • BEMによるCSS設計
  • GSAPによる軽量なアニメーション

使用している技術

HTML / CSS / SCSS / JavaScript / GSAP / WordPress


WEBSITE