【簡単】スマホ対応のパララックスを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を変更すれば上手くいくと思います。
だれかの参考になれば幸いです。
2023年IT導入補助金でお得にECサイト
【実践マーケティング手法２２選】 無料ダウンロード
助成金・補助金・融資・M＆A等の総合経営支援サービス「あなたのアイボー」
月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。
ワードプレスでSEO対策をするなら【オリテン】
seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。
