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

2019.03.20　Posted by Coding_team

Webプログラミング

11111

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

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

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

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

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

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

■流体シェイプの作り方

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

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

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

[HTML]

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

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

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

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

.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%); 
  }

.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 ); }
  }

@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'),
		}