• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン

2018/09/21

書いた人:
rurippa!
カテゴリ:
CSS   ネタ
408 views

CSSだけでパララックス風にする方法を紹介します。

たった3行の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つに閉まってもらえると幸いです。


この記事を読んだ人はこんな記事も読んでいます

<

>