1. 完成版

2. なぜか？

毎日CSS animation のネタを探しており、その中でみたことがないeffect を発見しました。
SPA で使えば、面白いユーザー体験となると思ってます。

一般的に、画面のX軸、Y軸のみのアニメーションだけではなく、奥域を感じるZ軸へのアニメーションは、3D の印象を醸し出すことができ、大変おもしろいです。先日のStarWars では、rotateXを用い奥域を表現しましたが、この分野に関しては、今後も研究していきます。

3. 参考文献

CSS Tricks

4. 分解してみる

❶.

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="curtain">
      <div class="curtain-wrapper">
        <div class="curtain-panel curtain-left"></div>
        <div class="curtain-center"></div>
        <div class="curtain-panel curtain_right"></div>
      </div>
    </div>
  </body>
</html>

styles.css

body {
  margin: 0px;
  padding: 0px;
  background: #fff;
  display: flex;
  justify-content: center;
}

.curtain {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.curtain-wrapper {
  width: 100%;
  height: 100%;
}

.curtain-panel {
  background: rgb(107, 76, 129);
  position: relative;
  width: 50%;
  height: 100vh;
  float: left;
  z-index: 2;
}

.curtain-center {
  background: rgb(121,223,158);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

カーテンができました。裏にもう一枚、画面が隠れてます。
css でoverflow: hiddenとすることで、カーテンが開いたときに画面枠からはみ出た部分を、非表示にしてます。

❷.
クリックすると、カーテンが左右に動くというアニメーションをつけます。
Javascript なしで、pure CSSでやるにはどうしたら良いでしょうか？

前回の記事のスキルを使いましょう！

index.html


  <body>
    <div class="curtain">
      <div class="curtain-wrapper">
        <div class="curtain-center"></div>

        <input type="checkbox" id="start" />
        <label for="start">
          <div class="curtain-panel curtain-left"></div>
          <div class="curtain-panel curtain-right"></div>
        </label>
      </div>
    </div>
  </body>

styles.css

body {
  margin: 0px;
  padding: 0px;
  background: #fff;
  display: flex;
  justify-content: center;
}

.curtain {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.curtain-wrapper {
  width: 100%;
  height: 100%;
}

.curtain-panel {
  background: rgb(107, 76, 129);
  position: relative;
  width: 50%;
  height: 100vh;
  float: left;
  z-index: 2;
  transition-timing-function: ease-out;
  transition-duration: 1s;
}

.curtain-center {
  background: rgb(121, 223, 158);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#start {
  display: none;
}

#start:checked + label .curtain-right {
  transform: translateX(100%);
}

#start:checked + label .curtain-left {
  transform: translateX(-100%);
}

できました！
ただし、これだと開きはするのですが、閉じません。
背景をクリックして、カーテンを閉じれるようにしましょう。

index.html

<body>
    <div class="curtain">
      <div class="curtain-wrapper">

        <input type="checkbox" id="start" />
        <label for="start">
          <div class="curtain-panel curtain-left"></div>
          <div class="curtain-panel curtain-right"></div>
          <div class="curtain-center"></div>
        </label>
      </div>
    </div>
  </body>

styles.css


#start:checked + label .curtain-right {
  transform: translateX(100%);
}

#start:checked + label .curtain-left {
  transform: translateX(-100%);
}

#start + label .curtain-right {
  transform: translateX(0);
}

#start + label .curtain-left {
  transform: translateX(0);
}

何をしたかというと、checkbox がチェックされているときは、動く。チェックされていないdefault の時は、translateX(0) で定位置に戻るという、アニメーションをつけております。

本日は以上です！
また明日〜

CSS animation で遊び倒す - Curtain Opening Effect -

1. 完成版

2. なぜか？

3. 参考文献

4. 分解してみる