HTML/CSS/JSで作成したスタバ

1. Header

プライマリロゴ

中央揃えバッジ

高さ、位置、および余白の値のみを中央に揃えます.トップとbottomを0に設定し、上下に貼り合わせ、marify:autoを自動的に中央に揃えます.

.logo {
	position: absolute;
    height: 75px; <!-- 반드시 높이값 부여 -->
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
}

検索ボタン

JavaScriptでプレースホルダ値を動的に割り当てます.blurでは、検索iconは不透明:0に消えます.

エンブレム

lodash、gsapライブラリを使用します.
しばらくスクロールしている場合は、不透明度と表示遷移が処理されます.

2.可視化（コーヒー画像部分）

同様に,fadeInはgsapを用いて処理した.animation-delay度

	gsap.to(fadeEl, 1, { opacity: 1, delay: (idx+1) * .7)