ホームページ

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

HTML5 のクールなレスポンシブビデオ背景アニメーション特殊効果

18 Jan 2017

これは、HTML5 に対応したクールなビデオ背景アニメーション効果です。このビデオ背景は、ビデオを画面のサイズに適応させて、クールでダイナミックなビデオ背景効果を作成できます。

HTML5 Canvas に基づくテキストアニメーションの特殊効果

02 Apr 2018

この記事では、HTML5 キャンバスに基づいたテキストアニメーションの特殊効果を紹介します。必要な方は参考にしてください。

7 つのクールな HTML5 Canvas アニメーション効果の詳細な紹介

08 Mar 2017

HTML5 は本当に優れた Web テクノロジーであり、ページ要素をより便利に操作できるだけでなく、HTML5 標準の導入後は、CSS3 がより大きな役割を果たすことができます。この記事では主に HTML5 Canvas に基づいたアニメーションの特殊効果をいくつか紹介します。気に入っていただければ幸いです。 1. HTML5 Canvas ウォーターフォールアニメーション、非常にリアルこれは Canvas に基づいた非常にリアルな HTML5 ウォーターフォールアニメーションで、効果は非常にクールです。オンラインデモのソースコードダウンロード 2. HTML5 Canvas color..

JS は Web ページのブラインド効果_ページの背景を実装します

16 May 2016

JS は、Web ページのブラインド特殊効果コードであるブラインド JS コードを実装します。ブラインドを閉じる効果と同様に、Web ページの特殊効果が上から下に切り替わります。さまざまなプログラミングコードに適用されます。これはまさに古典的な効果です。

HTML5 Canvas および Rebound アニメーションに基づくアニメーション特殊効果の読み込み

19 Jan 2017

これは、HTML5 キャンバスとリバウンドアニメーションに基づいたローディングアニメーションの特殊効果です。読み込みアニメーションでは、キャンバスを使用してページ全体をカバーし、読み込みの進行状況を表す多角形の読み込みローダーを表示します。

8 つの豪華な HTML5 テキストアニメーション特殊効果のグラフィックとテキストの鑑賞

06 Mar 2017

テキストは Web ページの魂です。昔、誰かが Web ページにさまざまなスタイルを与える美しいコンピューターフォントを発明しました。 HTML5 と CSS3 の登場により、必要に応じてテキストをよりパーソナライズできるようになり、HTML5 を使用してテキストをアニメーション化することもできます。この記事では、非常に豪華な 8 つの HTML5 テキストアニメーション特殊効果を紹介します。参考にしていただければ幸いです。 1. CSS3 3D 折り畳みおよび反転テキストアニメーション今日は、CSS3 テキスト特殊効果アプリケーションを共有します。これは、以前に共有された HTML5/CSS3 テキストエフェクトと似ていますが、CSS3 3D 折り畳みおよび反転テキストアニメーションでもあります。。

7 つの素晴らしい HTML5 パーティクルアニメーション特殊効果の詳細な紹介

06 Mar 2017

HTML5 の大きな利点の 1 つは、Web ページ上でパーティクルアニメーションの特殊効果をより便利かつ効率的に作成できることです。特に、Web ページ上に任意のグラフィックスやアニメーションを描画できる Canvas 機能を使用できます。この記事では、7 つの素晴らしい HTML5 パーティクルアニメーションエフェクトを紹介します。これらのパーティクルエフェクトは、誰でも学習できるソースコードをダウンロードできます。 1. HTML5 キャンバスパーティクルシミュレーションエフェクト HTML5 キャンバスを使用してシミュレートされた 30,000 個のパーティクルアニメーションです。キャンバス上でマウスを動かすと、マウスの周りのいくつかのパーティクルが動き、砂絵で遊んでいるように特定のパターンを形成します。、の効果...