CSS animation で遊び倒す - Parallax 3-

CSS animation day35 となりました。

本日は、

__position: sticky__

を使って、パララックスを表現したいと思います。



#1. 完成版

<p class="codepen" data-height="550" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="aMoEKw" style="height: 550px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Parallax Stich">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/aMoEKw/">
  Parallax Stich</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#2. 参考文献
[CSS Trciks:  Creating sliding effects using sticky positioning](https://css-tricks.com/creating-sliding-effects-using-sticky-positioning/)
[Medium: CSS Position Sticky - How It Really Works!](https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46)

[WPJ:  たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方](https://www.webprofessional.jp/js-library-scrollreveal-2/)
[q-az:  CSSのposition:stickyがすごく便利](https://q-az.net/position-sticky/)

[MDN: position](https://developer.mozilla.org/ja/docs/Web/CSS/position#Sticky_positioning)
#3. 分解してみる

❶. 
1: position: sticky は、あまり聞きなれないですが、一体なんでしょうか？

__position:sticky__
スクロールで、その指定された位置まできたら、それ以降は、固定されるという効果をもちます。
イメージとして、ゴキブリは最初自由に動いてますが、position: sticky という名のゴキブリホイホイを設置し、そこに捕まるとピタッと動かなくなるイメージです。ご飯中のかた、すみません。。
<br/>
2: [前回の記事](https://qiita.com/duka/items/b318e36cf330d1b34655) ででた、__position: fixed__  との違いは何か？

一言で言うと、`position:fixed` は、最初からゴキブリホイホイにくっついて、微動だにせず、ピタッと1mmも動いて欲しくない時に使い、`position: sticky` は、指定したところまではいつも通りスクロールすれば動くけど、途中からそこにバシッと固定したい時に使う、と考えれば、良さそうです！


MDN によると
>
粘着位置指定された要素は、指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱われます。

粘着位置指定を想定したとおりに動作させるためには、 top, right, bottom, left のうち少なくとも一つでしきい値を指定しなければならないので、

```
.container { position: sticky; top: 10px; }
```
のように設定する必要があります。

overflow: hidden をつけると、効果が消えてしまうようで、注意しましょう。
<br/>
❷.
マークアップします。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="sticky">パララックス</div>
      <div>なんて</div>
      <div>楽しいんだ！</div>
    </div>
  </body>
</html>
```

```styles.scss
body {
  background: #fff;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 1500px;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  background: linear-gradient(#efefbb, #d4d3dd);
  color: #fff;
  font-size: 30px;
  margin-bottom: 100px;
  width: 100vw;
  height: 100px;
}
```

![ezgif.com-optimize (10).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/9826b07e-a520-bd8b-f7f7-42391ff32c3f.gif)


グラディエントがついている要素が、top: 0 になった瞬間に、位置が固定されました。これが、position: sticky の効果です。
<br/>
❸.
では、しっかり作っていきましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <p>パララックス1</p>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

    <p>パララックス2</p>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

    <p>パララックス3</p>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

    <div class="footer"></div>
  </body>
</html>
```

```styles.scss
body {
  background: #fff;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 3000px;
}

p {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  width: 100vw;
  height: 100px;
  font-size: 30px;
  line-height: 100px;
  margin: 0;
  color: #fff;
  background: #7e0a3b;
}

.one,
.two,
.three {
  width: 100vw;
  height: 300px;
  font-size: 30px;
  line-height: 100px;
  color: #fff;
}

.one {
  background: #8adcaa;
}

.two {
  background: #64cf8d;
}

.three {
  background: #3ec271;
}

.footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0px;
  width: 100vw;
  height: 50px;
  background: linear-gradient(90deg, #8e0e00, #1f1c18);
}
```

<p class="codepen" data-height="550" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="aMoEKw" style="height: 550px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Parallax Stich">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/aMoEKw/">
  Parallax Stich</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


簡単にパララックスができました!
position: fixed と 同じくらい簡単ですね！　


明日は、奥域パララックスをお届けします。それではまた〜