たった３行のCSSで「パララックス風」にする方法

たった数行のCSSで、「パララックス風」になる方法を紹介します(^^)
とっても簡単だけど、いい感じになるので、お試しあれ。笑

backgroundプロパティを使った方法

background-attachment: fixed;を使うと、 背景画像を固定することができます！
これにより、パララックス（視差効果）っぽく仕上がります。

サンプル

          <div class="wrap"></div>

          <style>
          .wrap{
            height: 300px;
            background: url(画像のパス) no-repeat center center / cover;
            background-attachment: fixed;
          }
          </style>
          

まとめ

今回は一箇所だけサンプルを作ってみましたが。
横幅100%にして セクションとセクションの間にこういうのを複数用意しても面白いと思います。

CSSでこんな表現もできるんだなーと、ネタの引き出しの1つに閉まってもらえると幸いです。