HTML5 マグマ アニメーションの背景効果
<!doctype html>
<html>
<頭>
<メタ文字セット="utf-8">
<title>設(shè)置可能なアニメーション 畫のプロパティの HTML5 巖漿アニメーション背景特色</title>
<スタイル>
@charset "UTF-8";
*、 *：ビフォアーアフター {＃＃＃
ボックスのサイズ設(shè)定: ボーダーボックス;
}
體 {＃＃＃
パディング: 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("クラスを関數(shù)として呼び出すことはできません"); } }
変數(shù)設(shè)定 = {
振幅X: 150,
振幅Y: 20,
行數(shù): 30,
開(kāi)始カラー: '#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 時(shí)間 = 0;
var カーブ = 未定義;
var 速度 = 未定義;
var パス = 関數(shù) () {
関數(shù)パス(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 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 = 関數(shù)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();
};
復(fù)路;＃＃＃
}();
/* 初期化 */＃＃＃
var パス = 未定義;
関數(shù) 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
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"));
/* 與える */＃＃＃
関數(shù) render() {
c.width = winW;
c.height = winH;
カーブ = マウスダウン ? 2 : 4;
速度 = マウスダウン ? 6 : 0.8;
時(shí)間 = マウスダウン ? 0.1 : 0.05;
Paths.forEach(関數(shù) (パス, i) {
path.root.forEach(関數(shù) (r, j) {
if (j % 曲線 == 1) {
var move = Math.sin(時(shí)間 r.遅延) * 速度 * r.casual;
r.y -= 移動(dòng) / 2 - 移動(dòng);
}
if (j 1 % 曲線 == 0) {
var move = Math.sin(時(shí)間 r.遅延) * 速度 * r.casual;
r.x = 移動(dòng) / 2 - 移動(dòng) / 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 = 関數(shù) datgui() {
var gui = 新しい dat.GUI();
// dat.GUI.toggleHide();
gui.closed = true;
gui.add(設(shè)定, "振幅X", 40, 200).step(20).onChange(function (newValue) {
初期化（）;＃＃＃
});
gui.add(設(shè)定, "振幅Y", 0, 100).step(1).onChange(function (newValue) {
初期化（）;＃＃＃
});
gui.add(設(shè)定, "行", 5, 50).step(1).onChange(function (newValue) {
初期化（）;＃＃＃
});
gui.addColor(settings, "startColor").onChange(function (newValue) {
初期化（）;＃＃＃
document.querySelector('h1').innerHTML = 'または任意のもの';
});
gui.addColor(設(shè)定, "endColor").onChange(function (newValue) {
初期化（）;＃＃＃
document.querySelector('h1').innerHTML = 'または任意のもの';
});
GUI を返す;
}();
</スクリプト>
</本文>
</html>
このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロード サイトによって転載されたものです。ソフトウェアの整合性をご自身で確認(rèn)してください。このサイトのすべてのリソースは學(xué)習(xí)の參考のみを目的としています。商業(yè)目的で使用しないでください。そうでない場(chǎng)合は、すべての結(jié)果に対して責(zé)任を負(fù)うことになります。侵害がある場(chǎng)合は、削除するためにご連絡(luò)ください。連絡(luò)先情報(bào): admin@php.cn
関連記事
グラデーションの背景を持つカードとクーポンのレイアウトでギャップ効果を達(dá)成する方法は？
05 Apr 2025
カードレイアウトでギャップ効果を達(dá)成する方法は？カードバウチャーレイアウトを設(shè)計(jì)するときは、カードバウチャーの1つのコーナーまたはエッジ、特に...
グラデーションの背景を持つカードとクーポンのレイアウトに対するギャップ効果を達(dá)成する方法は？
05 Apr 2025
カードクーポンレイアウトのギャップ効果を?qū)g現(xiàn)します。カードクーポンレイアウトを設(shè)計(jì)するとき、特に背景が勾配である場(chǎng)合、カードクーポンにギャップを追加する必要があることがよくあります...
複雑なCSS勾配の背景と効果を作成します
12 Jul 2025
CSSグラデーションの背景は、カスケード、アニメーション、ブレンドモードを通じて複雑な視覚効果を可能にします。 1.複數(shù)の勾配はコンマで分離でき、下層は上層から引き出されます。半透明の色とさまざまな方向を使用して、レベルを高めることをお?jiǎng)幛幛筏蓼埂?2。アニメーションは、バックグラウンドポジションまたはキーフレームを通じて実裝でき、パフォーマンスと移行効果の制御に注意してください。 3。ミックスクリップ：テキストはグラデーションテキストを作成でき、マスクイメージと勾配を組み合わせて畫像マスキングを?qū)g現(xiàn)でき、ミックスブレンドモードは要素インタラクション設(shè)計(jì)に使用されます。
CSSの背景サイズの使用：カバーし、効果的に封じ込めます
12 Jul 2025
バックグラウンドサイズの選択：カバーと封じ込めは、コンテンツの優(yōu)先度に依存します。 1.カバーズーム畫像は、コンテナ全體が覆われていることを確認(rèn)し、一部のコンテンツをトリミングしている可能性があります。これは、背景が裝飾的であり、領(lǐng)域を満たす必要があるシーンに適しています。 2.ズーム畫像を含む完全なディスプレイが表示され、空白スペースが殘る可能性があります。これは、寫真の內(nèi)容が重要でトリミングできないシーンに適しています。 3.それを使用する場(chǎng)合は、特定のニーズに基づいて判斷する必要があります。必要に応じて、背景位置を使用して作物の位置を制御して、合理的な視覚的重心を確保する必要があります。
ストリップタグ以外の HTML 特殊文字コードを効果的に削除するにはどうすればよいですか?
18 Oct 2024
効果的な HTML 特殊文字の削除:strip_tags を超えた拡張strip_tags は HTML タグを効果的に削除しますが、HTML 特殊文字コードが殘る可能性があります。 「 」や「?」などのコードは、RSS フィード ファイルの保存を中斷する可能性があります。
CSS のみを使用して、透明な背景を持つ滑らかなアニメーションの円描畫効果を作成する方法
25 Oct 2024
CSS のみで境界半徑と透明な背景を使用して円をアニメーション化する問(wèn)題:アニメーション化された境界半徑の円を作成する方法...
勾配をどのようにカスタマイズして、背景や効果に効果的に適用できますか？
29 Jul 2025
tousegradientseffectively -design、startsmoothcolortransitionsusingcomplementaryhues、chosetherighttypeforthevisualpurpurse、rayerwithtransparencyfordepth、およびAppluctleturetultoolslikecssorfigma.beginelectinectinectingtwoorthreehormoniouriouscolo
グラデーションの背景の下で、カードとクーポンのレイアウトのギャップ効果を達(dá)成する方法は？
05 Apr 2025
カードレイアウトでギャップ効果を達(dá)成する方法は？カードバウチャーのレイアウトを設(shè)計(jì)するとき、カードバウチャーのエッジに対するギャップ効果を達(dá)成することは一般的な要件です。背景が純粋な場(chǎng)合...
ホットツール Tags
ホットツール
HTML5 キャンバスの心ときめくアニメーション特殊効果
HTML5 キャンバスのハートのはためきアニメーション特殊効果は、ブラウザで直接開(kāi)いてハートを確認(rèn)できる生成されたアニメーションです。
H5 パンダバウンスゲームのソースコード
HTML5 Mobile Panda もクレイジーなゲームのソース コードです。ゲームの説明: 畫面を長(zhǎng)押ししてパンダのバネの強(qiáng)さを調(diào)整し、石柱にジャンプします。川に落ちたらゲーム終了です。
HTML5 バレンタインデー ボックス アニメーションの特殊効果
svgをベースに、バレンタインデーのラブボックスギフトを開(kāi)けるアニメーションと、ラブボックスアニメーションの特殊効果を描畫します。
H5 3D ローリング ボール ゲームのソース コード
HTML5 クールな 3D ボールローリングモバイルゲームコードのダウンロード。ゲーム紹介: カラー ボールが転がり、マウスまたは攜帯電話のタッチ スクリーンでカラー ボールをドラッグすることで、カラー ボールの現(xiàn)在のトラックを制御します。シンプルで操作しやすいモバイルゲームのソースコードです。