Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@mimonelu

雨の日なので CSS だけで雨のアニメーションを実装する

More than 1 year has passed since last update.

定番ですが雨の日の気晴らしに。
JavaScript は使わずに CSS ( SCSS )だけで雨が降るアニメーションを実装してみました。

See the Pen SCSS Rain (No JS) by mimonelu (@mimonelu) on CodePen.

コード( SCSS )

.rain {

  $rain_drop_height: 20vh;

  background-color: #102030;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  & > div {
    animation: rain 500ms linear infinite;
    background-color: rgba(#ffffff, 0.25);
    position: absolute;
    left: 0;
    top: -$rain_drop_height;
    width: 1px;
    height: $rain_drop_height;
    transform-origin: center center;
  }
  @for $i from 1 through 25 {
    & > div:nth-child(#{$i}) {
      animation-delay: #{$i * 100}ms;
      animation-duration: random(250) + 375ms;
      left: random(100) + vw;
    }
  }

  @keyframes rain {
    from {
      transform: rotate(-5deg) translateY(-$rain_drop_height);
    }
    to {
      transform: rotate(-5deg) translateY(100vh + $rain_drop_height);
    }
  }

}

ミソ

乱数どうするの問題

雨粒の x 座標やアニメーションの再生時間などはランダムな値にしたいところですが、 CSS に乱数を生成する仕様はないため、 SCSS の random() 関数で生成しています。つまり、コンパイルした時に乱数が定数として埋め込まれるだけなので、何度リロードしても同じアニメーションが再生されますが、そこは妥協しました。だって他に方法ないし(´・ω・`)

transform の順番

雨粒を斜めに降らせるにはどうすれば良いでしょう?ここでは transform: rotate(...) translateY(...); とすることで、雨粒が「回転した方向へ移動」するようにしました。これを入れ替えると「角度は無視して移動」することになり、要するに行列計算の順番を制御することで、あ、ご存知で?あ、はい。

おわりに

紙吹雪が瞬きながら舞うアニメーションなんかも実装できますが、無茶せずに JavaScript を、できれば Canvas も使って実装した方が良いでしょうね。

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mimonelu
Front-end engineer.

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?