2017/04/28

[CSS]背景画像を固定させてスクロールで切り替えるパララックス

背景画像は固定されていて、他の要素(文章とか)だけがスクロールされる。さらにスクロールしていくと、いつの間にか背景画像が変わっている。パララックス(視差効果)を用いたシングルページサイトをよく見かける。

そんなウェブサイトをCSSだけで実現する。


背景画像を固定させてスクロールで切り替える


背景画像を固定させる方法は、background-attachementプロパティを使う。
  • fixed
    • 背景画像の位置が固定されて、スクロールしても動かない
    • 窓から風景を見ているような感じ
  • scroll
    • 背景画像が要素に固定されるので、スクロールで動く

<!-- index.html -->
<main>
  <section class="fixed bg1">
    <div class="container">
      <h1>Fixed position</h1>
      <p>background-image</p>
    </div>
  </section>
  <section class="scrolling">
    <div class="bg">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non.</p>
    </div>
  </section>
  <section class="fixed bg2"></section>
  <section class="scrolling">
    <div class="bg">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non.</p>
    </div>
  </section>
  <section class="fixed bg3">
  </section>
  <section class="scrolling">
    <div class="bg">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non.</p>
    </div>
  </section>
  <section class="fixed bg4"></section>
  <section class="scrolling">
    <div class="bg">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non.</p>
    </div>
  </section>
</main>

/* style.sass */
main {
  height: 100vh;
}
.scrolling {
  > .bg {
    transform: skewY(-4.5deg);
    background-color: #F6F4DB;
    margin: -50px auto;
    padding: 10px 0;

  > p {
      transform: skewY(4.5deg);
      width: 60%;
      margin: 60px auto;
      font-size: 25px;
    }
  }
}
.fixed {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  
  &.bg1 { background-image: url(//www.pakutaso.com/shared/img/thumb/ELFADSC08949_TP_V.jpg); }
  &.bg2 { background-image: url(//www.pakutaso.com/shared/img/thumb/ELFASIMG_1983_TP_V.jpg); }
  &.bg3 { background-image: url(//www.pakutaso.com/shared/img/thumb/TSURU170321-45%20mm-096_TP_V.jpg); }
  &.bg4 { background-image: url(//www.pakutaso.com/shared/img/thumb/hirota_sabanna_TP_V.jpg); }
}

.fixed.bg1 {
  position: relative;
  
  > .container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    color: white;
    
    > h1 {
      font-size: 70px;
      margin: 0;
    }
    > p {
      font-size: 30px;
    }
  }
}

.scrollingクラスが指定されている要素はスクロールされる部分。
.fixedクラスが指定されている要素はスクロールされても動かさない部分。

実際どんな仕組みで動いているかは、scrollingセクションを全部消すと理解しやすいだろう。




以上


written by @bc_rikko

0 件のコメント :

コメントを投稿