背景の動き②

波打つ

HTMLの<canvas>タグにJavaScriptを使い波(塗り)を描画する。
※JavaScript参照 https://jsfiddle.net/39we73t1/

高さを持たせた親要素の中に設置すると描画される。
特定の要素の下部に波を入れたい時は、親要素に配置の基点となるposition:relative;をつけ、<canvas>タグを絶対配置でbottom:0;に指定する。

波1つ(重なりなし)

See the Pen 波打つ(1つ重なりなし) by Toru Katsumata (@Toru-Katsumata) on CodePen.

波1つ(重なりあり)

See the Pen 波打つ(1つ重なりあり) by Toru Katsumata (@Toru-Katsumata) on CodePen.

複数(重なりなし)

See the Pen 波打つ(複数 重なりなし) by Toru Katsumata (@Toru-Katsumata) on CodePen.

波線

HTMLの<canvas>タグにJavaScriptを使い波(線のみ)を描画する。
※JavaScript参照 https://jsfiddle.net/39we73t1/

高さを持たせた親要素の中に設置すると描画される。
特定の要素の下部に波を入れたい時は、親要素に配置の基点となるposition:relative;をつけ、<canvas>タグを絶対配置でbottom:0;に指定する。

波線(1つ)

See the Pen 波線(1つ) by Toru Katsumata (@Toru-Katsumata) on CodePen.

波線(複数)

See the Pen 波線(複数) by Toru Katsumata (@Toru-Katsumata) on CodePen.

水滴が落ちる

Raindrops.jsというライブラリを使い、HTML内の<canvas>タグにポタポタ水滴が落ちるアニメーションを描画する。
【使用するライブラリ】
Raindrops.js(https://daniellaharel.com/raindrops/

See the Pen 水滴が落ちる by Toru Katsumata (@Toru-Katsumata) on CodePen.

粒子が集まってタイポグラフィーを形成する

particleText.jsというライブラリを使い、HTML内の<canvas>タグに粒子が集まってテキストになるアニメーションを描写する。
【使用するライブラリ】
particleText.js(https://github.com/55Kaerukun/particleText.js

See the Pen 粒子が集まってタイポグラフィーを形成する by Toru Katsumata (@Toru-Katsumata) on CodePen.

※テキストが横に長いと画面からはみ出て非表示になる。その場合は改行を利用して表示させる。
※particleText.js本体の中では、font-familyの指定や、粒子の数の指定ができる。レイアウトによって調整すること。

inserted by FC2 system