ポートフォリオサイト

シャツの枚数やデザインタイプ、お届け希望日などによって価格が変動するシミュレーターを実装しました。
また、PHPによって注文確認メールなどが送信されるように開発しました。

Googleスプレッドシートへ注文内容を自動的に追加する機能もあります。

https://code-step.com/xd-public/
こちらのサイトで公開されているデザインカンプをもとに作成したデモホームページです。
全体的に縦書きのレイアウトを採用しており、和風なテイストになっています。
ヘッダーの背景画像のスライドショーやスクロールのプログレスバーなどはすべて自作しています。
こちらで使用している画像はすべて商用利用可、およびクレジット掲載不要のフリー素材を使用しています。
レスポンシブ対応です。

現在のポートフォリオサイトを構成はそのままでパーティクルエフェクトを主体にしたデザインにしたものです。

パーティクルエフェクトはThree.jsを用いてスクロールに応じて形が徐々に変化するようにしました。

PCの場合は左側に、スマートフォンの場合は背景にパーティクルが表示されます。

レスポンシブ対応です。