【簡単】スマホ対応のパララックスをcssのみで作る

福岡でホームページ制作、SEO対策を行っている株式会社スゴヨクです。

簡単にスマホ対応のパララックスを作る方法をご紹介します。

bodyに疑似要素のbefore又はafterでposition:fixed;をかけるだけ

body: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;
}

これだけでパララックスが出来ます。

sectionごとにパララックスがしたい場合は、
都度z-indexを変更すれば上手くいくと思います。

だれかの参考になれば幸いです。