カメラを構えている写真 カメラを構えている写真

Blog

Blog

動くデザイン

動く液体シェイプを作る

2022年8月15日
Webサイトの最近のトレンドの中に、『液体シェイプ』があります。 液体が波打つような曲線を持つ液体シェイプ。Webデザインに取り入れることで、優しい印象を与えることができます。 色は単色やグラデーション、シェイプの中が写真の場合もあります。さらに、そのシェイプが時間経過と共に形を変化させる『動く液体シェイプ』もあります。 この液体シェイプ、動くようにするにはjQueryが必要なのではと思い、面倒で後回しにしてましたが、たまたま見つけた液体シェイプが作れるオンラインツールを使ってみたら、簡単に実装できたのでご紹介します。

液体シェイプジェネレーター

実装の手順

①Blob Animationを開きます。 https://blobanimation.com/   ↓ 日本語に翻訳した方が使いやすい方は翻訳しましょう。   ②設定できる項目
  • Animation Speed(アニメーション速度)
  • Gradient(グラデーション)
  • Blob Layers(Blobレイヤー数)
  • Transparency(不透明度)
  • Compelxity(複雑さ)
  • Total Animation(アニメーションのスタイル数)
  • Blur Filter(ぼかしフィルタ)
  • Rotate(回転)
  • Add image(画像を追加)
色は2色のグラデーション又は単色が設定できますが、Add image(画像を追加)で画像にすることもできます。   ③液体シェイプを画像にする場合は、あらかじめサーバに画像をアップロードしておく必要があること。また、液体シェイプのサイズは、画像のサイズに依存するため、Webサイトで使いたいサイズでアップロードする必要があります。   ④私の場合は、画像を使って液体シェイプを作りました。Copy Code(コードをコピー)ボタンを押してコードを取得し、html内にペースト。簡単に実装できました。  
アーカイブ