【簡単】スマホ対応のパララックスをcssのみで作る
福岡でホームページ制作、SEO対策を行っている株式会社スゴヨクです。 bodyに疑似要素のbefore又はafterでposition:fixed;をかけるだけ これだけでパララックスが出来ます。 sectionごとにパララックスがしたい場合は、
簡単にスマホ対応のパララックスを作る方法をご紹介します。
1234567891011121314body:before { content: ""; display: block; z-index: -1; //-1じゃないと他のz-indexに干渉してしまう width: 100vh; //これがあれば横幅がどのサイズでも大丈夫 height: 100vh; //これがあれば縦がどのサイズでも大丈夫 background: 張りたい画像; background-size: cover; position: fixed; top: 0; left: 0; right: 0; margin: auto;}
都度z-indexを変更すれば上手くいくと思います。
だれかの参考になれば幸いです。
【実践マーケティング手法２２選】 無料ダウンロード
助成金を使ってホームページを制作しませんか？
スゴヨクでは、小規模事業者持続化補助金を使ったホームページ制作を行っています。
助成額が3分の2、最大50万円まで補助されるので、（要件次第で100万円も可能）
ホームページ制作、広告をお考えの方は一度ご連絡ください。
申請は無料なので、まずはご連絡いただけると幸いです。
ワードプレスでSEO対策をするなら【オリテン】
seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。
