lokasi sekarang: Rumah > Muat turun > Kesan JS > kesan khas html5 > Kesan latar belakang animasi magma HTML5
Kesan latar belakang animasi magma HTML5
Mengelaskan: Kesan JS / kesan khas html5 | Masa keluaran: 2017-12-23 | lawatan: 1560 |
Muat turun: 55 |
Muat turun terkini
Akuarium Fantasi
Gadis Barisan Hadapan
Sayap Bintang
Syurga Peri Peri Bunga Kecil
Kisah Comel Restoran
Penjelajahan Pelancongan Shanhe
Cinta dan Pengeluar
Otak yang paling berkuasa 3
Debu Ganjil: Damila
Perjalanan Muda ke Barat 2
24 jamPapan pendahulu membaca
- 1 Cabaran Membina Aplikasi Web dengan Rangka Kerja Node.js
- 2 Di bursa manakah syiling CFX boleh dibeli?
- 3 Apakah yang membezakan Wrapped Dog daripada dogecoin lain?
- 4 Ketahui tentang asal usul mata wang FTM dalam satu artikel
- 5 Supercharge Animasi Web Anda: Optimumkan requestAnimationFrame Seperti Pro
- 6 Adakah mata wang EOS bernilai dipegang untuk jangka panjang?
- 7 Menulis Kod Bersih, Cekap dan Boleh Diselenggara - Python sebagai kes penggunaan.
- 8 Tutorial penggunaan dompet sejuk Coldlar: Bagaimana cara menggunakan dompet sejuk Coldlar dengan cara paling selamat?
- 9 Kebocoran Kindle Generasi ke-12 baharu, akan datang dalam warna hijau yang cantik
- 10 Sony mendedahkan acara pelancaran baharu untuk pembesar suara LinkBuds, LinkBuds S dan LinkBuds baharu yang dikhabarkan
- 11 Apakah mata wang FTM?
- 12 Epic Games Store memberikan permainan indie yang menawan sebagai sebahagian daripada tawaran permainan percuma mingguan
- 13 Garmin mengeluarkan kemas kini baharu untuk berbilang jam tangan pintar yang bertujuan untuk membetulkan ranap aktiviti
- 14 Bagaimana untuk berjaya melabur dalam token SEI?
- 15 Tutorial penggunaan dompet sejuk iToken: Bagaimana cara menggunakan dompet sejuk iToken dengan cara paling selamat?
Tutorial Terkini
-
- Koleksi lengkap kursus timbunan penuh pembangunan web asing
- 1412 2024-04-24
-
- Gunakan GraphQL praktikal bahasa
- 1699 2024-04-19
-
- Bermula dengan MySQL (Teacher mosh)
- 1582 2024-04-07
-
- Mock.js |. Axios.js |
- 2420 2024-03-29
<!doctype html>
<html>
<kepala>
<meta charset="utf-8">
<title>可设置动画属性的HTML5岩浆动画背景特效</title>
<gaya>
@charset "UTF-8";
*, *:sebelum, *:selepas {
saiz kotak: kotak sempadan;
}
badan {
pelapik: 0;
jidar: 0;
limpahan: tersembunyi;
font-family: 'Roboto', sans-serif;
}
kanvas {
lebar: 100vw;
ketinggian: 100vh;
}
h1 {
jawatan: mutlak;
indeks z: 1;
lebar: 100%;
kiri: 0;
atas: 50%;
-webkit-transform: translateY(-50%);
ubah: terjemahY(-50%);
mod campuran-campuran: tindanan;
warna: rgba(0, 0, 0, 0.3);
ketinggian garisan: 0;
saiz fon: 16px;
jarak huruf: 4px;
penjajaran teks: tengah;
text-transform: huruf besar;
ubah: terjemahY(-50%);
kursor: penunjuk;
-webkit-transition: color .2s kemudahan-masuk-keluar;
peralihan: warna .2s mudah masuk;
-webkit-user-select: tiada;
-moz-user-select: tiada;
-ms-user-select: tiada;
pilihan pengguna: tiada;
}
h1:tuding {
warna: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<badan>
<skrip src="js/chroma.min.js"></script>
<script src="js/dat.gui.min.js"></script>
<canvas id="canvas"></canvas>
<h1>Lantai ialah Lava</h1>
<skrip>
'gunakan ketat';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Tidak boleh memanggil kelas sebagai fungsi"); } }
tetapan var = {
amplitudX: 150,
amplitudY: 20,
baris: 30,
Warna mula: '#500c44',
endColor: '#b4d455'
};
var c = document.getElementById("kanvas");
var ctx = c.getContext("2d");
var winW = window.innerWidth;
var winH = window.innerHeight;
var Laluan = [];
warna var = [];
var mouseY = 0;
var mouseDown = palsu;
var masa = 0;
lengkung var = tidak ditentukan;
var halaju = tidak ditentukan;
var Laluan = fungsi () {
fungsi Laluan(y, warna) {
_classCallCheck(ini, Laluan);
ini.y = y;
this.color = warna;
this.root = [];
this.create();
this.draw();
}
Path.prototype.create = function create() {
var rootX = 0;
var rootY = this.y;
this.root = [{ x: rootX, y: rootY }];
manakala (rootX < winW) {
var casual = Math.random() > 0.5 ? 1: -1;
var x = parseInt(settings.amplitudeX / 2 + Math.random() * settings.amplitudeX / 2);
var y = parseInt(rootY + casual * (settings.amplitudeY / 2 + Math.random() * settings.amplitudeY / 2));
rootX += x;
kelewatan var = Math.random() * 100;
this.root.push({ x: rootX, y: y, ketinggian: rootY, santai: santai, kelewatan: kelewatan });
}
};
Path.prototype.draw = function draw() {
ctx.beginPath();
ctx.moveTo(0, winH);
ctx.lineTo(this.root[0].x, this.root[0].y);
untuk (var i = 1; i < this.root.length - 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();
};
Laluan kembali;
}();
/* INIT */
laluan var = tidak ditentukan;
fungsi init() {
c.width = winW;
c.tinggi = winH;
Laluan = [];
warna = chroma.scale([settings.startColor, settings.endColor]).mode('lch').colors(settings.lines);
document.body.style = 'background: ' + settings.startColor;
untuk (var i = 0; i < settings.lines; i++) {
Paths.push(Path baharu(winH / settings.lines * i, color[i]));
settings.startY = winH / settings.lines * i;
}
}
/* MENANG UBAH SAIZ */
window.addEventListener('ubah saiz', fungsi () {
winW = window.innerWidth;
winH = window.innerHeight;
c.width = winW;
c.tinggi = winH;
init();
});
window.dispatchEvent(Peristiwa baharu("ubah saiz"));
/* RENDER */
fungsi render() {
c.width = winW;
c.tinggi = winH;
lengkung = mouseDown ? 2: 4;
halaju = mouseDown ? 6 : 0.8;
masa += mouseDown ? 0.1 : 0.05;
Paths.forEach(fungsi (laluan, i) {
path.root.forEach(fungsi (r, j) {
jika (j % lengkung == 1) {
var move = Math.sin(masa + r.delay) * halaju * r.santai;
r.y -= bergerak / 2 - bergerak;
}
jika (j + 1 % lengkung == 0) {
var move = Math.sin(masa + r.delay) * halaju * r.santai;
r.x += bergerak / 2 - bergerak / 10;
}
});
path.draw();
});
requestAnimationFrame(render);
}
render();
/* MOUSEDOWN */
'mousedown touchstart'.split(' ').forEach(fungsi (e) {
document.addEventListener(e, function () {
mouseDown = benar;
});
});
/* MOUSEUP */
'mouseup mouseleave touchend'.split(' ').forEach(fungsi (e) {
document.addEventListener(e, function () {
mouseDown = palsu;
});
});
/* MOUSEMOVE */
'mousemove touchmove'.split(' ').forEach(fungsi (e) {
document.addEventListener(e, fungsi (e) {
tetikusY = e.klienY || e.sentuhan[0].klienY;
});
});
/* GUI DATA */
var gui = fungsi datgui() {
var gui = new dat.GUI();
// dat.GUI.toggleHide();
gui.closed = benar;
gui.add(tetapan, "amplitudeX", 40, 200).step(20).onChange(function (newValue) {
init();
});
gui.add(tetapan, "amplitudY", 0, 100).step(1).onChange(function (newValue) {
init();
});
gui.add(setting, "lines", 5, 50).step(1).onChange(function (newValue) {
init();
});
gui.addColor(tetapan, "startColor").onChange(function (newValue) {
init();
document.querySelector('h1').innerHTML = 'atau apa sahaja yang anda mahu';
});
gui.addColor(tetapan, "endColor").onChange(function (newValue) {
init();
document.querySelector('h1').innerHTML = 'atau apa sahaja yang anda mahu';
});
kembalikan gui;
}();
</skrip>
</body>
</html>
Ini ialah kesan latar belakang animasi magma HTML5 yang baik yang boleh menetapkan sifat animasi Kembangkan menu di bahagian atas sebelah kanan halaman web untuk menetapkan amplitud animasi, warna dan sifat lain.