bg01

Landing Page Idea Note 01

position Stckeyを使った背景

stickyを利用して疑似Parallax。

Parallaxでは全然ないですが、セクションごとに背景を切り替える感じ。

ただのバックグランド ポジション fixed よりも動きがあるのでいい感じ。

bg02

このようにSectionごとに画像を変更します。

セクションが切り替わるときに背景画像もスライドするので、セクションごとに背景をFixedで指定するより動きが出ます。

ただこのdivのようにセクションのファーストビューに置きたい場合、個別でmargin-topの調整が必要です。

アルバム

ga01 ga01 ga01 ga01
bg02

Parallaxではない

全然Parallaxではありません。が、まぁ面白い動きなのでよしとしてください。

アルバム

target属性を使ってtailWindCSSのみでLightBox

class="hidden target:block"

を使うことでモーダルを実現できる。

Menu

twitter X