背景の動き
-波線(複数)-
See the Pen 5-15 波線(複数) by 動くWebデザインアイディア帳 (@ugokuweb)on CodePen.
「Result」内の表示を確かめてね!
動きを実現する仕組み
HTMLの<canvas>タグにJavaScriptを使い波(線のみ)を描画する。
※JavaScript参照 https://jsfiddle.net/39we73t1/
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-15.css"> </head>
- body内の波を表示させたい場所にHTMLを記載します。
<canvas id="waveCanvas"></canvas> <!--↓波を増やしたい場合は、idを別にしてcanvasタグを追加していく--> <canvas id="waveCanvas2"></canvas> <canvas id="waveCanvas3"></canvas>
- body 終了タグ直前に動きを制御する自作のJS を読み込みます。
<script src="js/5-15.js"></script> </body>
自作の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(['#0ff', '#ff0', '#f00', '#00f', '#f0f']);//重ねる波線の色設定
// canvas2個めの色指定
canvasList.push(document.getElementById("waveCanvas2"));
colorList.push(['#43c0e4']);
// canvas3個めの色指定
canvasList.push(document.getElementById("waveCanvas3"));
colorList.push(['#666', '#888']);
// 各キャンバスの初期化
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.8, 3, 0);
drawWave(canvas, color[1], 0.5, 4, 0);
drawWave(canvas, color[2], 0.3, 1.6, 0);
drawWave(canvas, color[3], 0.2, 3, 100);
drawWave(canvas, color[4], 0.8, 2, 0);
}
/**
* 波を描画
* drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ)
*/
function drawWave(canvas, color, alpha, zoom, delay) {
var context = canvas.contextCache;
context.strokeStyle = color;//線の色
context.lineWidth = 1;//線の幅
context.globalAlpha = alpha;
context.beginPath(); //パスの開始
drawSine(canvas, info.t / 0.5, zoom, delay);
context.stroke(); //線
}
/**
* 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();
バリエーション
を見る
「印象」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!