Webサイトの最近のトレンドの中に、『液体シェイプ』があります。
液体が波打つような曲線を持つ液体シェイプ。Webデザインに取り入れることで、優しい印象を与えることができます。
色は単色やグラデーション、シェイプの中が写真の場合もあります。さらに、そのシェイプが時間経過と共に形を変化させる『動く液体シェイプ』もあります。
この液体シェイプ、動くようにするにはjQueryが必要なのではと思い、面倒で後回しにしてましたが、たまたま見つけた液体シェイプが作れるオンラインツールを使ってみたら、簡単に実装できたのでご紹介します。
液体シェイプジェネレーター
実装の手順
①Blob Animationを開きます。 https://blobanimation.com/
↓ 日本語に翻訳した方が使いやすい方は翻訳しましょう。
②設定できる項目
- Animation Speed（アニメーション速度）
- Gradient（グラデーション）
- Blob Layers（Blobレイヤー数）
- Transparency（不透明度）
- Compelxity（複雑さ）
- Total Animation（アニメーションのスタイル数）
- Blur Filter（ぼかしフィルタ）
- Rotate（回転）
- Add image（画像を追加）
