CSS

カテゴリーページ

波打つ（複数重なりあり）

HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-13.css">

body内の波を表示させたい場所にHTMLを記載します。

<canvas id="waveCanvas"></canvas>

<!--↓波を増やしたい場合は、idを別にしてcanvasタグを追加していく-->

<canvas id="waveCanvas2"></canvas>
<canvas id="waveCanvas3"></canvas>

body 終了タグ直前に動きを制御する自作のJS を読み込みます。

<script src="js/5-13.js"></script>

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

（例）

<div class="wave">
	<canvas id="waveCanvas"></canvas>
</div>

.wave{
	position:relative;
	height:200px;/*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
	background:#fff;/*背景を塗りつぶして重ねた波を表現したい場合は、波を描画する親要素に波と同じ背景色を設定しましょう。*/
}
canvas{
	position: absolute;
	bottom: 0;
	left:0;
	width: 100%;
}

JSの書き方

var unit = 100,
canvasList, // キャンバスの配列
info = {}, // 全キャンバス共通の描画情報
colorList; // 各キャンバスの色情報

/**
 * Init function.
 * 
 * Initialize variables and begin the animation.
 */
function init() {
	info.seconds = 0;
	info.t = 0;
	canvasList = [ ];
	colorList = [ ];
	// canvas1個めの色指定
	canvasList.push(document.getElementById("waveCanvas"));
	colorList.push([ '#666', '#ccc', '#eee' ]);//重ねる波の色設定

	// canvas2個めの色指定
	canvasList.push(document.getElementById("waveCanvas2"));
	colorList.push([ '#43c0e4' ]);
    
	// canvas3個めの色指定
	canvasList.push(document.getElementById("waveCanvas3"));
	colorList.push([ '#fff' ]);

	// 各キャンバスの初期化
	for(var canvasIndex in canvasList) {
	var canvas = canvasList[ canvasIndex ];
	canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる
	canvas.height = 200;//波の高さ
	canvas.contextCache = canvas.getContext("2d");
	}
	// 共通の更新処理呼び出し
	update();
}

function update() {
	for(var canvasIndex in canvasList) {
		var canvas = canvasList[ canvasIndex ];
		// 各キャンバスの描画
		draw(canvas, colorList[ canvasIndex ]);
	}
	// 共通の描画情報の更新
	info.seconds = info.seconds + .014;
	info.t = info.seconds*Math.PI;
	// 自身の再起呼び出し
	setTimeout(update, 35);
}

/**
 * Draw animation function.
 * 
 * This function draws one frame of the animation, waits 20ms, and then calls
 * itself again.
 */
function draw(canvas, color) {
	// 対象のcanvasのコンテキストを取得
	var context = canvas.contextCache;
	// キャンバスの描画をクリア
	context.clearRect(0, 0, canvas.width, canvas.height);
	//波の重なりを描画 drawWave(canvas, color[ 数字（波の数を0から数えて指定） ], 透過, 波の幅のzoom,波の開始位置の遅れ )
	drawWave(canvas, color[ 0 ], 0.5, 3, 0);
	drawWave(canvas, color[ 1 ], 0.4, 2, 250);
	drawWave(canvas, color[ 2 ], 0.2, 1.6, 100);
}

/**
* 波を描画
* drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ)
*/
function drawWave(canvas, color, alpha, zoom, delay) {
	var context = canvas.contextCache;
	context.fillStyle = color;//塗りの色
	context.globalAlpha = alpha;
	context.beginPath(); //パスの開始
	drawSine(canvas, info.t / 0.5, zoom, delay);
	context.lineTo(canvas.width + 10, canvas.height); //パスをCanvasの右下へ
	context.lineTo(0, canvas.height); //パスをCanvasの左下へ
	context.closePath() //パスを閉じる
	context.fill(); //塗りつぶす
}

/**
 * Function to draw sine
 * 
 * The sine curve is drawn in 10px segments starting at the origin. 
 * drawSine(時間, 波の幅のzoom, 波の開始位置の遅れ)
 */
function drawSine(canvas, t, zoom, delay) {
	var xAxis = Math.floor(canvas.height/2);
	var yAxis = 0;
	var context = canvas.contextCache;
	// Set the initial x and y, starting at 0,0 and translating to the origin on
	// the canvas.
	var x = t; //時間を横の位置とする
	var y = Math.sin(x)/zoom;
	context.moveTo(yAxis, unit*y+xAxis); //スタート位置にパスを置く

	// Loop to draw segments (横幅の分、波を描画)
	for (i = yAxis; i <= canvas.width + 10; i += 10) {
		x = t+(-yAxis+i)/unit/zoom;
		y = Math.sin(x - delay)/3;
		context.lineTo(i, unit*y+xAxis);
	}
}

init();

投稿日：2022年08月03日

波打つ（複数重なりなし）

カテゴリー：背景の動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-12.css">

body内の波を表示させたい場所にHTMLを記載します。

<canvas id="waveCanvas"></canvas>

<!--↓波を増やしたい場合は、idを別にしてcanvasタグを追加していく-->

<canvas id="waveCanvas2"></canvas>
<canvas id="waveCanvas3"></canvas>

body 終了タグ直前に動きを制御する自作のJS を読み込みます。

<script src="js/5-12.js"></script>

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

<div class="wave">
	<canvas id="waveCanvas"></canvas>
</div>

.wave{
	position:relative;
	height:200px;/*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
	background:#fff;/*背景を塗りつぶして重ねた波を表現したい場合は、波を描画する親要素に波と同じ背景色を設定しましょう。*/
}
canvas{
	position: absolute;
	bottom: 0;
	left:0;
	width: 100%;
}

JSの書き方

var unit = 100,
canvasList, // キャンバスの配列
info = {}, // 全キャンバス共通の描画情報
colorList; // 各キャンバスの色情報

/**
 * Init function.
 * 
 * Initialize variables and begin the animation.
 */
function init() {
	info.seconds = 0;
	info.t = 0;
	canvasList = [ ];
	colorList = [ ];
	// canvas1個めの色指定
	canvasList.push(document.getElementById("waveCanvas"));
	colorList.push([ '#eee' ]);
    
	// canvas2個めの色指定
	canvasList.push(document.getElementById("waveCanvas2"));
	colorList.push([ '#43c0e4' ]);
    
	// canvas3個めの色指定
	canvasList.push(document.getElementById("waveCanvas3"));
	colorList.push([ '#fff' ]);
	// 各キャンバスの初期化
for(var canvasIndex in canvasList) {
	var canvas = canvasList[canvasIndex];
	canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる
	canvas.height = 200;//波の高さ
	canvas.contextCache = canvas.getContext("2d");
	}
	// 共通の更新処理呼び出し
	update();
}

function update() {
	for(var canvasIndex in canvasList) {
		var canvas = canvasList[canvasIndex];
		// 各キャンバスの描画
		draw(canvas, colorList[canvasIndex]);
	}
	// 共通の描画情報の更新
	info.seconds = info.seconds + .014;
	info.t = info.seconds*Math.PI;
	// 自身の再起呼び出し
	setTimeout(update, 35);
}

/**
 * Draw animation function.
 * 
 * This function draws one frame of the animation, waits 20ms, and then calls
 * itself again.
 */
function draw(canvas, color) {
	// 対象のcanvasのコンテキストを取得
	var context = canvas.contextCache;
	// キャンバスの描画をクリア
	context.clearRect(0, 0, canvas.width, canvas.height);
	//波を描画 drawWave(canvas, color[数字（波の数を0から数えて指定）], 透過, 波の幅のzoom,波の開始位置の遅れ )
	drawWave(canvas, color[0], 1, 3, 0);
}

/**
* 波を描画
* drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ)
*/
function drawWave(canvas, color, alpha, zoom, delay) {
	var context = canvas.contextCache;
	context.fillStyle = color;//塗りの色
	context.globalAlpha = alpha;
	context.beginPath(); //パスの開始
	drawSine(canvas, info.t / 0.5, zoom, delay);
	context.lineTo(canvas.width + 10, canvas.height); //パスをCanvasの右下へ
	context.lineTo(0, canvas.height); //パスをCanvasの左下へ
	context.closePath() //パスを閉じる
	context.fill(); //波を塗りつぶす
}

/**
 * Function to draw sine
 * 
 * The sine curve is drawn in 10px segments starting at the origin. 
 * drawSine(時間, 波の幅のzoom, 波の開始位置の遅れ)
 */
function drawSine(canvas, t, zoom, delay) {
	var xAxis = Math.floor(canvas.height/2);
	var yAxis = 0;
	var context = canvas.contextCache;
	// Set the initial x and y, starting at 0,0 and translating to the origin on
	// the canvas.
	var x = t; //時間を横の位置とする
	var y = Math.sin(x)/zoom;
	context.moveTo(yAxis, unit*y+xAxis); //スタート位置にパスを置く

	// Loop to draw segments (横幅の分、波を描画)
	for (i = yAxis; i <= canvas.width + 10; i += 10) {
		x = t+(-yAxis+i)/unit/zoom;
		y = Math.sin(x - delay)/3;
		context.lineTo(i, unit*y+xAxis);
	}
}

init();

投稿日：2022年08月03日

波打つ（1 つ重なりあり）

カテゴリー：背景の動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-11.css">

body内の波を表示させたい場所にHTMLを記載します。

<canvas id="waveCanvas"></canvas>

body 終了タグ直前に動きを制御する自作のJS を読み込みます。

<script src="js/5-11.js"></script>

<div class="wave">
	<canvas id="waveCanvas"></canvas>
</div>

.wave{
	position:relative;
	height:200px;/*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
}
canvas{
	position: absolute;
	bottom: 0;
	left:0;
	width: 100%;
}

JSの書き方

var unit = 100,
canvasList, // キャンバスの配列
info = {}, // 全キャンバス共通の描画情報
colorList; // 各キャンバスの色情報

/**
 * Init function.
 * 
 * Initialize variables and begin the animation.
 */
function init() {
	info.seconds = 0;
	info.t = 0;
	canvasList = [];
	colorList = [];
	// canvas1個めの色指定
	canvasList.push(document.getElementById("waveCanvas"));
	colorList.push(['#333', '#666', '#111']);//重ねる波の色設定
	// 各キャンバスの初期化
for(var canvasIndex in canvasList) {
		var canvas = canvasList[canvasIndex];
		canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる
		canvas.height = 200;//波の高さ
		canvas.contextCache = canvas.getContext("2d");
	}
	// 共通の更新処理呼び出し
	update();
}

function update() {
		for(var canvasIndex in canvasList) {
			var canvas = canvasList[canvasIndex];
			// 各キャンバスの描画
			draw(canvas, colorList[canvasIndex]);
		}
	// 共通の描画情報の更新
	info.seconds = info.seconds + .014;
	info.t = info.seconds*Math.PI;
	// 自身の再起呼び出し
	setTimeout(update, 35);
}

/**
 * Draw animation function.
 * 
 * This function draws one frame of the animation, waits 20ms, and then calls
 * itself again.
 */
function draw(canvas, color) {
	// 対象のcanvasのコンテキストを取得
	var context = canvas.contextCache;
	// キャンバスの描画をクリア
	context.clearRect(0, 0, canvas.width, canvas.height);

	//波の重なりを描画 drawWave(canvas, color[数字（波の数を0から数えて指定）], 透過, 波の幅のzoom,波の開始位置の遅れ )
	drawWave(canvas, color[0], 0.5, 3, 0);//0.5⇒透過具合50%、3⇒数字が大きいほど波がなだらか
	drawWave(canvas, color[1], 0.4, 2, 250);
	drawWave(canvas, color[2], 0.2, 1.6, 100);
}

/**
* 波を描画
* drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ)
*/
function drawWave(canvas, color, alpha, zoom, delay) {
	var context = canvas.contextCache;
	context.fillStyle = color;//塗りの色
	context.globalAlpha = alpha;
	context.beginPath(); //パスの開始
	drawSine(canvas, info.t / 0.5, zoom, delay);
	context.lineTo(canvas.width + 10, canvas.height); //パスをCanvasの右下へ
	context.lineTo(0, canvas.height); //パスをCanvasの左下へ
	context.closePath() //パスを閉じる
	context.fill(); //波を塗りつぶす
}

/**
 * Function to draw sine
 * 
 * The sine curve is drawn in 10px segments starting at the origin. 
 * drawSine(時間, 波の幅のzoom, 波の開始位置の遅れ)
 */
function drawSine(canvas, t, zoom, delay) {
	var xAxis = Math.floor(canvas.height/2);
	var yAxis = 0;
	var context = canvas.contextCache;
	// Set the initial x and y, starting at 0,0 and translating to the origin on
	// the canvas.
	var x = t; //時間を横の位置とする
	var y = Math.sin(x)/zoom;
	context.moveTo(yAxis, unit*y+xAxis); //スタート位置にパスを置く

	// Loop to draw segments (横幅の分、波を描画)
	for (i = yAxis; i <= canvas.width + 10; i += 10) {
		x = t+(-yAxis+i)/unit/zoom;
		y = Math.sin(x - delay)/3;
		context.lineTo(i, unit*y+xAxis);
	}
}

init();

投稿日：2022年08月03日

波打つ（1 つ重なりなし）

カテゴリー：背景の動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-10.css">

body内の波を表示させたい場所にHTMLを記載します。

<canvas id="waveCanvas"></canvas>

body 終了タグ直前に動きを制御する自作のJS を読み込みます。

<script src="js/5-10.js"></script>

CSSの書き方

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

<div class="wave">
<canvas id="waveCanvas"></canvas>
</div>

.wave{
	position:relative;
	height:200px;/*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
}
canvas{
	position: absolute;
	bottom: 0;
	left:0;
	width: 100%;
}

JSの書き方

var unit = 100,
canvasList, // キャンバスの配列
info = {}, // 全キャンバス共通の描画情報
colorList; // 各キャンバスの色情報

/**
 * Init function.
 * 
 * Initialize variables and begin the animation.
 */
function init() {
	info.seconds = 0;
	info.t = 0;
	canvasList = [ ];
	colorList = [ ];
	// canvas1個めの色指定
	canvasList.push(document.getElementById("waveCanvas"));
	colorList.push([ '#43c0e4' ]);
	// 各キャンバスの初期化
		for(var canvasIndex in canvasList) {
		var canvas = canvasList[canvasIndex];
		canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる
		canvas.height = 200;//波の高さ
		canvas.contextCache = canvas.getContext("2d");
	}
	// 共通の更新処理呼び出し
	update();
}

function update() {
	for(var canvasIndex in canvasList) {
		var canvas = canvasList[canvasIndex];
		// 各キャンバスの描画
		draw(canvas, colorList[canvasIndex]);
	}
	// 共通の描画情報の更新
	info.seconds = info.seconds + .014;
	info.t = info.seconds*Math.PI;
	// 自身の再起呼び出し
	setTimeout(update, 35);
}

/**
 * Draw animation function.
 * 
 * This function draws one frame of the animation, waits 20ms, and then calls
 * itself again.
 */
function draw(canvas, color) {
	// 対象のcanvasのコンテキストを取得
	var context = canvas.contextCache;
	// キャンバスの描画をクリア
	context.clearRect(0, 0, canvas.width, canvas.height);
	//波を描画 drawWave(canvas, color[数字（波の数を0から数えて指定）], 透過, 波の幅のzoom,波の開始位置の遅れ )
	drawWave(canvas, color[0], 1, 3, 0);//drawWave(canvas, color[0],0.5, 3, 0);とすると透過50%の波が出来る
}

/**
* 波を描画
* drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ)
*/
function drawWave(canvas, color, alpha, zoom, delay) {
	var context = canvas.contextCache;
	context.fillStyle = color;//塗りの色
	context.globalAlpha = alpha;
	context.beginPath(); //パスの開始
	drawSine(canvas, info.t / 0.5, zoom, delay);
	context.lineTo(canvas.width + 10, canvas.height); //パスをCanvasの右下へ
	context.lineTo(0, canvas.height); //パスをCanvasの左下へ
	context.closePath() //パスを閉じる
	context.fill(); //波を塗りつぶす
}

/**
 * Function to draw sine
 * 
 * The sine curve is drawn in 10px segments starting at the origin. 
 * drawSine(時間, 波の幅のzoom, 波の開始位置の遅れ)
 */
function drawSine(canvas, t, zoom, delay) {
	var xAxis = Math.floor(canvas.height/2);
	var yAxis = 0;
	var context = canvas.contextCache;
	// Set the initial x and y, starting at 0,0 and translating to the origin on
	// the canvas.
	var x = t; //時間を横の位置とする
	var y = Math.sin(x)/zoom;
	context.moveTo(yAxis, unit*y+xAxis); //スタート位置にパスを置く

	// Loop to draw segments (横幅の分、波を描画)
	for (i = yAxis; i <= canvas.width + 10; i += 10) {
		x = t+(-yAxis+i)/unit/zoom;
		y = Math.sin(x - delay)/3;
		context.lineTo(i, unit*y+xAxis);
	}
}

init();

投稿日：2022年08月01日

星がキラキラ

カテゴリー：背景の動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-9.css">

bodyに対してCSSを適応します。

<div id="particles-js"></div>
<div id="wrapper">
	この中にコンテンツが入ります。
<!--/wrapper--></div>

3.body 終了タグ直前にparticle.jsと、動きを制御する自作のJS の2 つを読み込みます。

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!--自作のJS-->
<script src="js/5-9.js"></script>

CSSの書き方

particle.jsで描画されたエリア(#particle-js)の上にコンテンツ(#wrapper)を設置する設定を行う。

html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	background-color:#020E34;/*背景色*/
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}

JSの書き方

particlesJS("particles-js", {
	"particles":{
		"number":{
			"value":346,//この数値を変更すると星の数が増減できる
			"density":{
				"enable":true,
				"value_area":800
			}
		},
		"color":{
			"value":"#ffffff"
		},
		"shape":{
			"type":"circle",//形状はcircleを指定
			"stroke":{
				"width":0
			},
		},
		"opacity":{
			"value":1,//シェイプの透明度
			"random":true,//シェイプの透明度をランダムにする
			"anim":{
				"enable":true,//シェイプの透明度をアニメーションさせる
				"speed":3,//シェイプの透明度をアニメーションさせる
				"opacity_min":0,//透明度の最小値０
				"sync":false//全てを同時にアニメーションさせない
			}
		},
		"size":{
			"value":2,
			"random":true,
			"anim":{
				"enable":false,
				"speed":4,
				"size_min":0.3,
				"sync":false
			}
		},
		"line_linked":{
			"enable":false,
		},
		"move":{
			"enable":true,
			"speed":120,//この数値を小さくするとゆっくりな動きになる
			"direction":"none",//方向指定なし
			"random":true,//動きはランダムに
			"straight":true,//動きをとどめる
			"out_mode":"out",
			"bounce":false,
			"attract":{
				"enable":false,
				"rotateX":600,
				"rotateY":600
			}
		}
	},
	"interactivity":{
		"detect_on":"canvas",
		"events":{
			"onhover":{
				"enable":false,
			},
			"onclick":{
				"enable":false,
			},
			"resize":true
		}
	},
	"retina_detect":true
});

投稿日：2022年08月01日

カテゴリーページ

波打つ（複数 重なりあり）

波打つ（複数 重なりなし）

波打つ（1 つ 重なりあり）

波打つ（1 つ 重なりなし）

星がキラキラ

アーカイブ

波打つ（複数重なりあり）

波打つ（複数重なりなし）

波打つ（1 つ重なりあり）

波打つ（1 つ重なりなし）