ポートフォリオ「Alpaca Beer」を公開しました！
ポートフォリオサイト「Alpaca Beer」を公開しました！
「クラフトビールのサブスクリプションサービスのLP」をテーマに作成しました。
画像を大きく表示することで、ビールの美味しさ・美しさを表現しています。
実装した動き
スクロールによるヘッダーの背景色の変更
ページの先頭を表示している場合は、背景画像を画面いっぱいに表示するために、
透明背景 + 白い文字でサイトのタイトルを表示します。
スクロール後は、背景が透明であるとサイトのタイトルがコンテンツに被ってしまうため、
ヘッダー背景色を黄色とし、黒い文字でサイトのタイトルを表示します。
スクロールをトリガーとする、コンテンツのアニメーション
コンテンツの表示箇所までスクロールした際に、コンテンツが画面外からスライドして表示されるようなアニメーションを実装しています。
スライドショー
スライドショーを実装しています。
表示中でない画像を見切れさせることで、このコンテンツがスライドショーであることをユーザが察知できます。
ドロップダウンメニュー
よくあるお問い合わせの回答を通常時は非表示にし、ドロップダウンメニューを開いた際に表示されるようにしています。
お問い合わせとその回答を常時表示した場合、記載が冗長になってしまいますが、
通常時は非表示にしておくことで、多くの情報をスッキリと掲載することができます。
下記リンクより、ぜひご覧ください！
