流行りの流体シェイプを作ろう

こんにちは、ウェブラボ技術メモです。

今回は今年流行している、「流体シェイプ」についてご紹介します。

■流体シェイプの使われているサイト

2019年に流行するWebデザインの手法に流体シェイプがあるのはご存知ですか？

以下のサイトでは流体シェイプが使われているサイトをまとめているのでぜひ参考にして見てください。

参考サイト：流体シェイプを使ったWebデザインの魅力と参考になるサイト

■流体シェイプの作り方

サイトでは、SVGを使って動かす方法が使われていますが、難しいのでまずは

CSSとJSで作る方法をご紹介します。

参考サイト：【CSS】【JavaScript】流体アニメーションを作りたい

[HTML]

<div class="fluid rotate gradation"></div>

1、CSSでベースの色を決め、シェイプを作ります。

.fluid {
  width: 300px;
  height: 300px;
  background: rgba( #BCC7E5, 1 );
}

2、CSSでグラデーションをつけます。
(今回は球体なので中心が薄い色、外側に向かってだんだん濃くなるように設定します。)

.gradation {  
  background: radial-gradient(ellipse at center, rgba(225,230,243,0.75) 0%,rgba(188,199,229,0.75) 100%); 
  }

3、CSSで回転させます。

@keyframes rotate {
    0% { transform: rotate( 0 ); }
    100% { transform: rotate( 360deg ); }
  }

4、JSでMath.round()関数を使って、角丸のサイズをランダムに変更します。

$('.fluid').animate({
			borderTopLeftRadius: String(Math.round((Math.random() * randomness02 + threshold02)) + 'px'),
			borderTopRightRadius: String(Math.round((Math.random() * randomness + threshold)) + 'px'),
			borderBottomLeftRadius: String(Math.round((Math.random() * randomness + threshold)) + 'px'),
			borderBottomRightRadius: String(Math.round((Math.random() * randomness02 + threshold02)) + 'px'),
		}

試しにデモを作ってみました!

デモページはこちら

新しいデザインを取り入れる際には是非試して見てくださいね！