銀河鉄道

月うさぎBlog

【CSS】でカーテンを作る[jQuery不要]簡単ローディング

記事更新日：2022-01-30

サムネイル
CSSカーテン

ローディング画面でjQuery使いたくない。

【 Point 】

最近は、ローディング画面があるとウケが良い、という理由も多いらしい。

（＝ 本来の目的が関係ない場合もある）

それなら、CSSでカーテンを作ってみよう。

１． translateX で横移動する

まずは左側から。

箱を作って横移動させるだけで、カーテンっぽい。

ここをクリックしてコードを見る
@keyframes move-left {
 100% {
  transform: translateX(-100%);
 }
}

// 0% は省略できる

【 Point 】

親要素に、overflow: hidden をつけて、はみ出した部分を非表示に。

背景が宇宙だから、青にした。

でも、色が単調すぎるよ。

２．背景色をグラデーションにする

radial-gradientで中心から外へのグラデーションに。

ここをクリックしてコードを見る
background: radial-gradient(ellipse at center,
            #1b2735 40%,
            #090a0f 100%);

丸みもほしいよ。

３．border-bottom-right-radiusで右下を丸くする

左下なら、border-bottom-left-radius。

ここをクリックしてコードを見る
border-bottom-right-radius: 100%;

劇場のカーテンって、横じゃなくて上にいくよね？

４．translateのYを追加して左上へ移動

Y方向の移動も追加できる。

ここをクリックしてコードを見る
@keyframes move-top-left {
 100% {
  transform: translate(-50%, -50%);
 }
}

角度もほしい。

５．rotateで少し回転させる

回転しながら移動。

ここをクリックしてコードを見る
@keyframes open-curtain {
 100% {
  transform: translate(-50%, -50%) rotate(20deg);
 }
}

やっぱり、色が暗いかな。

６．box-shadowを inset（内側）で入れる

黄色いbox-shadowを入れてメリハリをつけてみよう。

ここをクリックしてコードを見る
box-shadow: inset -40px 0 50px rgba(255, 255, 85, 0.2),
            inset -90px 0 120px rgba(255, 255, 85, 0.2);

境界線もクッキリとさせたい。

７．border-right を追加する

左側ならborder-left。

色は、月と同じムラサキに。

ここをクリックしてコードを見る
border-right: 4px solid #660066;

ちょっと、のっぺり感がする。

８．疑似要素でグランジを追加する

フリー素材でグランジを見つけた。

ここをクリックしてコードを見る
.curtain-left {
 &::before 
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(グランジ画像のパス);
  background-repeat: repeat;
  background-position: center center;
  border-bottom-right-radius: 100%;
  opacity: 0.11;
 }
}

【 Point 】

「グランジ画像 フリー素材」で検索すると、いろいろ出てくるので活用してみよう。

だいぶオシャレになった。

まとめ

仕上げはposition: fixed で。

右側は、逆の要領で。

最終形は、このサイトをリロードして確認を。

fixedが親要素・子要素どっちに必要かとか、

overflow: hiddenが効かないとか、

z-indexで重なり順を調整するとか、

ヘッダーがクリックできなくなるとか、

最終チェックは、少しやっかい。

最終のコードを見る
.wrapper {
 position: fixed;
 display: flex;
 top: 0;
 left: 0;
 overflow: hidden;
 opacity: 0.8;
 z-index: 1000;
}

.curtain-left {
  position: fixed;
  width: 60%;
  height: 100vh;
  top: 0;
  left: 0;
  background: radial-gradient(ellipse at center,
              #1b2735 40%,
              #090a0f 100%);
  border-bottom-right-radius: 100%;
  box-shadow: inset -40px 0 50px rgba(255, 255, 85, 0.2),
              inset -90px 0 120px rgba(255, 255, 85, 0.2);
  border-right: 4px solid #660066;
  animation: open-curtain 4s ease-out forwards;

  &::before 
   position: absolute;
   content: '';
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: url(グランジ画像のパス);
   background-repeat: repeat;
   background-position: center center;
   border-bottom-right-radius: 100%;
   opacity: 0.11;
   animation: open-curtain 4s ease-out forwards;
}


@keyframes open-curtain {
 100% {
  transform: translate(-50%, -50%) rotate(20deg);
 }
}

著者

author
月うさぎ

2022-01-30

編集後記：
この記事の内容がベストではないかもしれません。

記事一覧