CSS animation で遊び倒す - Parallax 2-

CSS animation day34 となりました。

本日は、
`background-attachment: fixed
position: fixed `
を使って、パララックスを表現したいと思います。



#1. 完成版

<p class="codepen" data-height="720" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="MLNzdg" style="height: 720px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Beutiful Parallax">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/MLNzdg/">
  Beutiful Parallax</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. 参考文献
[サルワカ]()
[Web Design Leaves](http://www.webdesignleaves.com/wp/jquery/604/)

#3. 分解してみる

❶. 
マークアップしましょう。

```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 id="first">
        <div class="inner">
          <h1>CSS parallax</h1>
        </div>
      </div>

      <div id="second">
        <div class="inner">
          <h2>Spring has come</h2>
        </div>
      </div>

      <div id="third">
        <div class="inner">
          <h2>Winter has end</h2>
        </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: 3000px;
}

#first {
  background: url("../img/star.png");
  background-size: cover; 
  width: 100%;
  height: 1000px;

}

#second {
  background-image: url("../img/sunset.png");
  background-size: cover;
  width: 100%;
  height: 1000px;
}

#third {
  background-image: url("../img/back.png");
  background-size: cover;
  width: 100%;
  height: 1000px;
}

.inner h1 {
  color: #fff;
  position: absolute;
  top: 30px;
  left: 50px;
  z-index: 5;
}

.inner h2 {
  color: darkblue;
}
```

<img width="1094" alt="スクリーンショット 2019-02-24 10.07.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/62fb24db-2861-a932-345e-cf44463c7d50.png">


![sunset.png](https://qiita-image-store.s3.amazonaws.com/0/232715/8a98e2df-1ad6-17e1-05d0-abc4299d681c.png)


<img width="1118" alt="スクリーンショット 2019-02-24 10.09.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/9f4a6fb9-6922-c9b1-2195-62a1553459cd.png">

ただの静止画が3枚縦に並びました。
綺麗ですね。
<br/>
❷.

これからパララックスを取り入れていきます。
先ほどの背景画像を、動かないように固定しましょう。

```styles.scss
#first {
  background: url("../img/star.png");
  background-size: cover;
  width: 100%;
  height: 1000px;
  background-attachment: fixed;
}

#second {
  background-image: url("../img/sunset.png");
  background-size: cover;
  width: 100%;
  height: 1000px;
  background-attachment: fixed;
}

#third {
  background-image: url("../img/back.png");
  background-size: cover;
  width: 100%;
  height: 1000px;
  background-attachment: fixed;
}

.inner h1 {
  color: #fff;
  position: fixed;
  top: 30px;
  left: 50px;
  z-index: 5;
}
```

[background-attachment](https://developer.mozilla.org/ja/docs/Web/CSS/background-attachment) は、fixed, local, scroll の3つの設定ができます。fixed を設定し、スクロールをされての、背景画像が動かないようにしましょう。


タイトルの``CSS parallax``も固定されるように、position: fixed しましょう。


<p class="codepen" data-height="577" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="VgoERL" style="height: 577px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="VgoERL">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/VgoERL/">
  VgoERL</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>

パララックスができました！　
<br/>
❸.
最後に、表現力をあげて、parallax を美しくしましょう。

今までに学んだ、[skewテクニック](https://qiita.com/duka/items/f5401cb8626c78e6914c) 、[textアニメーションテクニック](https://qiita.com/duka/items/dd05538652f69bb28f2a) を駆使します。

```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 id="first">
        <div class="inner skew">
          <p>CSS parallax</p>
        </div>
      </div>

      <div id="second">
        <div class="inner1">
          <span>Art is Powerful</span>
        </div>
      </div>

      <div id="third">
        <div class="shining">
          <span>Enjoy your Life</span>
        </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: 3000px;
  overflow: hidden;
}

#first {
  background: url("../img/star.png");
  background-size: cover;
  width: 100%;
  height: 1000px;
  background-attachment: fixed;
}

#second {
  background-image: url("../img/sunset.png");
  background-size: cover;
  width: 100%;
  height: 1000px;
  background-attachment: fixed;
}

#third {
  background-image: url("../img/back.png");
  background-size: cover;
  width: 100%;
  height: 1000px;
  background-attachment: fixed;
}

.inner p {
  color: #fff;
  font-size: 50px;
  font-family: "Kaushan Script", cursive;
  position: fixed;
  top: 30px;
  left: 50px;
  z-index: 5;
}

.inner1 {
  position: relative;
  margin: 30vh 50vw;
  width: 400px;
  height: 400px;
  border: 1px solid transparent;
  border-radius: 50%;
  box-shadow: 10px 32px 30px rgba(0, 0, 0, 0.2);
  span {
    font-size: 80px;
    font-weight: bold;
    background-image: url("../img/sunset.png");
    background-position: 0 -550px;
    height: 300px;
    width: 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Homemade Apple", cursive;
  }
}

.skew {
  position: relative;
  top: 0;
  left: 530px;
}

.skew:before {
  content: "";
  background-image: url("../img/star.png");
  background-position: center center;
  background-size: cover;
  display: block;
  position: relative;
  width: 1000px;
  height: 1000px;
  transform: translate3d(0, 0, 0) skew(-15deg, 0);
}

.shining {
  position: relative;
  top: 0%;
  left: 0%;
  background: linear-gradient(#f2fcfe, #0cebeb, #20e3b2);
  background-position: center center;
  background-size: cover;
  display: block;
  width: 500px;
  height: 700px;
  filter: blur(20px);
}
```

<p class="codepen" data-height="720" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="MLNzdg" style="height: 720px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Beutiful Parallax">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/MLNzdg/">
  Beutiful Parallax</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>

完成しました！

パララックスの印象としては、昨日のtranslateZ, perspective をいじるより簡単な気がします。明日は、別のパララックスを学びます。

それではまた〜