CSS animation で遊び倒す - Parallax 2-

Posted at 2019-02-24

CSS animation day34 となりました。

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

#1. 完成版

See the Pen Beutiful Parallax by hiroya iizuka (@hiroyaiizuka) on CodePen.

#2. 参考文献
サルワカ
 Web Design Leaves

#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;
}

ただの静止画が3枚縦に並びました。
綺麗ですね。

❷.

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

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 は、fixed, local, scroll の3つの設定ができます。fixed を設定し、スクロールをされての、背景画像が動かないようにしましょう。

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

See the Pen VgoERL by hiroya iizuka (@hiroyaiizuka) on CodePen.

パララックスができました！　

❸.
最後に、表現力をあげて、parallax を美しくしましょう。

今までに学んだ、skewテクニック、textアニメーションテクニックを駆使します。

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);
}

See the Pen Beutiful Parallax by hiroya iizuka (@hiroyaiizuka) on CodePen.

完成しました！

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

それではまた〜

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up