CSS parallaxを実装

今回は視差（パララックス）をCSSでいくつか実装しよう。

background-attachment: fixed;

これを使うと画像が真ん中で固定され要素がスクロールされていく。

<template>
 <ul>
  <li class="paras img01">あああああ</li>
  <li class="paras img02">いいいいい</li>
 </ul>
</template>
<style scoped>
ul {
  width: 100%;
  height: 1000px;
}
.paras {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 1rem;
  color: blue;
}
.img01 {
  background-image: url(../assets/img/img01.JPG);
}
.img02 {
  background-image: url(../assets/img/img02.JPG);
}
</style>

position: sticky; top: 0;

最近？出てきたやつで、兄弟要素にかける

<div class="block block-one">
 <p>one</p>
</div>
<div class="block block-two">
 <p>two</p>
</div>
<div class="block block-three">
 <p>Three</p>
</div>
<style scoped lang="scss">
.block {
  outline: 1px solid red;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  p {
    display: inline-block;
    font-size: 60px;
    font-family: 'Great Vibes', cursive;
    padding: 0;
    margin: 0;
  }
}
.block-one {
  background-image: url(../assets/img/img01.JPG);
}
.block-two {
  background-image: url(../assets/img/img02.JPG);
}
.block-three {
  background-image: url(../assets/img/img01.JPG);
}
</style>

---

感想

業務で一回困った事があった。
スクロールする物をdivタグなどブロック要素にし、それにposition:stiky;するとスクロールする。