CSS 雨滴エフェクト

ウェブデザインでよく見られるエフェクトの一つとして、「雨の滴が窓ガラスに落ちる」ような視覚効果があります。このエフェクトは、CSSのみを使用して、非常にリアルで美しい効果を作り出すことができます。ここでは、HAML（HTMLの縮小版）とSass（CSSの拡張機能）を用いて、この「雨滴が窓に落ちる」効果を実現する方法について、完全かつ包括的に解説します。

1. 必要な準備

まずは、HAMLとSassを使ってこの効果を作り上げるために、必要な環境を整えます。SassはCSSの拡張機能なので、まずSassが使える環境を整えておきましょう。Sassを使うことで、ネストや変数、ミキシンなどの強力な機能を活用できます。

HAMLも、HTMLを書く際により簡潔に記述できるため、効率的に作業を進めることができます。まず、HAMLとSassを用いるためには、以下のようなセットアップが必要です。

HAMLのインストール

HAMLを使うには、Ruby環境が必要です。Rubyがインストールされていない場合は、まずRubyをインストールし、その後HAMLをインストールします。

bash
CopyEdit
gem install haml

Sassのインストール

Sassも同様に、Ruby環境で使えます。以下のコマンドでインストールできます。

bash
CopyEdit
gem install sass

これで、HAMLとSassを使用する準備が整いました。

2. HTML構造（HAML）

雨滴エフェクトを作成するために、まずHAMLでHTML構造を作ります。HAMLでは、インデントを使用してHTMLを簡潔に記述できます。

以下のHAMLコードは、雨滴が窓に落ちる効果を作成するための基本的なHTML構造です。

haml
CopyEdit
!!! 5
%html
  %head
    %meta{ charset: "UTF-8" }
    %title 雨滴エフェクト
    %link{ rel: "stylesheet", href: "styles.css" }
  %body
    .window
      .raindrops

• .window は、窓を表す要素です。

• .raindrops は、雨滴を含むコンテナ要素です。

この構造に基づいて、CSS（Sass）を適用し、雨滴エフェクトを作り上げます。

3. Sassによるスタイリング

次に、Sassを使用して雨滴が窓に落ちる効果を作ります。以下のコードは、雨滴のアニメーションとスタイリングを行います。

styles.sass

sass
CopyEdit
// 変数の定義
$raindrop-color: rgba(255, 255, 255, 0.7)
$window-background: #2a2a2a
$window-width: 100vw
$window-height: 100vh

// 全体のスタイル
* {
  margin: 0
  padding: 0
  box-sizing: border-box
}

body {
  background-color: #111
  height: 100vh
  display: flex
  justify-content: center
  align-items: center
  overflow: hidden
}

// 窓のスタイル
.window {
  position: relative
  width: $window-width
  height: $window-height
  background: $window-background
  border-radius: 15px
  overflow: hidden
}

// 雨滴のスタイル
.raindrops {
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  pointer-events: none
}

// 雨滴を生成するクラス
.raindrop {
  position: absolute
  width: 4px
  height: 15px
  background-color: $raindrop-color
  animation: fall 1s infinite ease-in

  // ランダムな位置、速度、回転を設定
  @keyframes fall
    0% 
      top: -20px
      left: random(0, 100) + %
    100% 
      top: 100vh

  // ランダムに雨滴を生成するためのCSS変数
  @for $i from 1 to 100
    .raindrop:nth-child(#{$i}) 
      animation-duration: random(1, 2) + s
      animation-delay: random(0, 5) + s

解説

• 変数の設定
  
  $raindrop-color や $window-background は、カスタマイズ可能な変数です。これを使ってデザインの色や背景色を変更できます。

• .raindrops
  
  この要素は、雨滴を含むコンテナです。position: absolute を使って、全画面を覆うように配置します。

• .raindrop
  
  各雨滴は、position: absolute で位置をランダムに決定し、animation を使用して落下のアニメーションを作成します。このアニメーションは、雨滴が画面の上から下に落ちる効果を実現します。

• ランダム化
  
  .raindrop に対して nth-child を使用して、ランダムな速度や開始位置を設定します。これにより、複数の雨滴が異なるタイミングで画面に現れ、リアルな雨のような効果が得られます。

4. 最終的なアニメーション

SassとHAMLの組み合わせにより、雨滴が画面上をランダムに落ちる効果が完璧に再現されます。アニメーションの速度や位置はランダムに変更されるため、毎回違った雨の効果を見ることができます。

完全なコード構成

• index.haml

haml
CopyEdit
!!! 5
%html
  %head
    %meta{ charset: "UTF-8" }
    %title 雨滴エフェクト
    %link{ rel: "stylesheet", href: "styles.css" }
  %body
    .window
      .raindrops

• styles.sass

sass
CopyEdit
// 変数の定義
$raindrop-color: rgba(255, 255, 255, 0.7)
$window-background: #2a2a2a
$window-width: 100vw
$window-height: 100vh

// 全体のスタイル
* {
  margin: 0
  padding: 0
  box-sizing: border-box
}

body {
  background-color: #111
  height: 100vh
  display: flex
  justify-content: center
  align-items: center
  overflow: hidden
}

// 窓のスタイル
.window {
  position: relative
  width: $window-width
  height: $window-height
  background: $window-background
  border-radius: 15px
  overflow: hidden
}

// 雨滴のスタイル
.raindrops {
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  pointer-events: none
}

// 雨滴を生成するクラス
.raindrop {
  position: absolute
  width: 4px
  height: 15px
  background-color: $raindrop-color
  animation: fall 1s infinite ease-in

  // ランダムな位置、速度、回転を設定
  @keyframes fall
    0% 
      top: -20px
      left: random(0, 100) + %
    100% 
      top: 100vh

  // ランダムに雨滴を生成するためのCSS変数
  @for $i from 1 to 100
    .raindrop:nth-child(#{$i}) 
      animation-duration: random(1, 2) + s
      animation-delay: random(0, 5) + s

5. 最後に

この方法で、HAMLとSassを使ってシンプルで美しい雨滴エフェクトを作成することができます。実際のプロジェクトに組み込む際は、アニメーションの速度やサイズを調整して、よりリアルな効果に仕上げることが可能です。