ホームページ

JS特殊効果

html5特殊効果

HTML5 マグマアニメーションの背景効果

ダウンロード中プレビュー

<!doctype html>
<html>
<頭>
<メタ文字セット="utf-8">
<title>設置可能なアニメーション画のプロパティの HTML5 岩浆アニメーション背景特色</title>

<スタイル>
@charset "UTF-8";
*、 *：ビフォアーアフター {＃＃＃ボックスのサイズ設定: ボーダーボックス;
}

体 {＃＃＃パディング: 0;
マージン: 0;
オーバーフロー: 非表示;
フォントファミリー: 'Roboto'、サンセリフ;
}

キャンバス {＃＃＃幅: 100vw;
高さ: 100vh;
}

h1 {
位置: 絶対;
z インデックス: 1;
幅: 100%;
左: 0;
トップ: 50%;
-webkit-transform: 翻訳Y(-50%);
変換:translateY(-50%);
ミックスブレンドモード: オーバーレイ;
色: rgba(0, 0, 0, 0.3);
行の高さ: 0;
フォントサイズ: 16px;
文字間隔: 4px;
テキスト整列: 中央;
テキスト変換: 大文字;
変換:translateY(-50%);
カーソル: ポインタ;
-webkit-transition: カラー .2s イーズインアウト;
トランジション: カラー .2s イーズインアウト;
-webkit-user-select: なし;
-moz-user-select: なし;
-ms-user-select: なし;
ユーザー選択: なし;
}
h1:ホバー {
色: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<本文>

<スクリプト src="js/chroma.min.js"></script>
<スクリプト src="js/dat.gui.min.js"></script>

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

<h1>床は溶岩です</h1>

<スクリプト>
'厳密を使用';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("クラスを関数として呼び出すことはできません"); } }

変数設定 = {
振幅X: 150,
振幅Y: 20,
行数: 30,
開始カラー: '#500c44',
終了色: '#b4d455'
};

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var winW = window.innerWidth;
var winH = window.innerHeight;
var パス = [];
var color = [];
var マウス Y = 0;
varmouseDown = false;
var 時間 = 0;
var カーブ = 未定義;
var 速度 = 未定義;

var パス = 関数 () {
関数パス(y, color) {
_classCallCheck(this, パス);

this.y = y;
this.color = color;
this.root = [];
this.create();
this.draw();
}

Path.prototype.create = function create() {
var rootX = 0;
var rootY = this.y;

this.root = [{ x: rootX, y: rootY }];

while (rootX var Casual = Math.random() > 0.5? 1 : -1;
var x = parseInt(settings.amplitudeX / 2 Math.random() * settings.amplitudeX / 2);
var y = parseInt(rootY カジュアル * (settings.amplitudeY / 2 Math.random() * settings.amplitudeY / 2));
rootX = x;
var 遅延 = Math.random() * 100;
this.root.push({ x: rootX, y: y, height: rootY, カジュアル: カジュアル, 遅延: 遅延 });
}
};

Path.prototype.draw = 関数draw() {
ctx.beginPath();
ctx.moveTo(0, winH);

ctx.lineTo(this.root[0].x, this.root[0].y);

for (var i = 1; i
var x = this.root[i].x;
var y = this.root[i].y;
var nextX = this.root[i 1].x;
var nextY = this.root[i 1].y;

var xMid = (x nextX) / 2;
var yMid = (y nextY) / 2;
var cpX1 = (xMid x) / 2;
var cpY1 = (yMid y) / 2;
var cpX2 = (xMid nextX) / 2;
var cpY2 = (yMid nextY) / 2;

ctx.quadraticCurveTo(cpX1, y, xMid, yMid);
ctx.quadraticCurveTo(cpX2, nextY, nextX, nextY);
}

var lastPoint = this.root.reverse()[0];
this.root.reverse();
ctx.lineTo(lastPoint.x, lastPoint.y);
ctx.lineTo(winW, winH);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
};

復路;＃＃＃ }();

/* 初期化 */＃＃＃
var パス = 未定義;
関数 init() {
c.width = winW;
c.height = winH;
パス = [];

color = chroma.scale([settings.startColor, settings.endColor]).mode('lch').colors(settings.lines);

document.body.style = 'background: ' settings.startColor;

for (var i = 0; i Paths.push(new Path(winH / settings.lines * i, color[i]));
settings.startY = winH / settings.lines * i;
}
}

/* サイズ変更に成功 */
window.addEventListener('resize', function () {
winW = window.innerWidth;
winH = window.innerHeight;
c.width = winW;
c.height = winH;
初期化（）;＃＃＃ });
window.dispatchEvent(new Event("resize"));

/* 与える */＃＃＃関数 render() {
c.width = winW;
c.height = winH;

カーブ = マウスダウン ? 2 : 4;
速度 = マウスダウン ? 6 : 0.8;

時間 = マウスダウン ? 0.1 : 0.05;

Paths.forEach(関数 (パス, i) {
path.root.forEach(関数 (r, j) {
if (j % 曲線 == 1) {
var move = Math.sin(時間 r.遅延) * 速度 * r.casual;
r.y -= 移動 / 2 - 移動;
}
if (j 1 % 曲線 == 0) {
var move = Math.sin(時間 r.遅延) * 速度 * r.casual;
r.x = 移動 / 2 - 移動 / 10;
}
});

path.draw();
});

requestAnimationFrame(render);
}
与える（）;＃＃＃
/* マウスダウン */
'mousedown touchstart'.split(' ').forEach(function (e) {
document.addEventListener(e, function () {
マウスダウン = true;
});
});

/* マウスアップ */
'mouseup、mouseleave、touchend'.split(' ').forEach(function (e) {
document.addEventListener(e, function () {
マウスダウン = false;
});
});

/* マウスムーブ */
'mousemove touchmove'.split(' ').forEach(function (e) {
document.addEventListener(e, function (e) {
マウス Y = e.clientY || e.touches[0].clientY;
});
});

/* データ GUI */
var gui = 関数 datgui() {
var gui = 新しい dat.GUI();
// dat.GUI.toggleHide();
gui.closed = true;
gui.add(設定, "振幅X", 40, 200).step(20).onChange(function (newValue) {
初期化（）;＃＃＃ });
gui.add(設定, "振幅Y", 0, 100).step(1).onChange(function (newValue) {
初期化（）;＃＃＃ });
gui.add(設定, "行", 5, 50).step(1).onChange(function (newValue) {
初期化（）;＃＃＃ });
gui.addColor(settings, "startColor").onChange(function (newValue) {

初期化（）;＃＃＃ document.querySelector('h1').innerHTML = 'または任意のもの';
});
gui.addColor(設定, "endColor").onChange(function (newValue) {
初期化（）;＃＃＃ document.querySelector('h1').innerHTML = 'または任意のもの';
});

GUI を返す;
}();
</スクリプト>

</本文>
</html>

これは、アニメーションプロパティを設定できる優れた HTML5 マグマアニメーション背景効果です。Web ページの右上にあるメニューを展開して、アニメーションの振幅、色、その他のプロパティを設定します。

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn