奔梦向前-代码实现加载中网页炫酷特效-2020-04-29

最新推荐文章于 2022-09-24 15:17:06 发布

奔梦向前

最新推荐文章于 2022-09-24 15:17:06 发布

阅读量347

点赞数

分类专栏：网页制作网页设计网页特效文章标签： html js web 网页设计代码规范

本文链接：https://blog.csdn.net/weixin_44519957/article/details/105828862

版权

本文通过HTML和JavaScript代码演示了一种网页加载中的炫酷特效实现，涉及Canvas元素和jQuery库。文章提醒读者在遇到兼容性问题时可尝试使用Google等浏览器，并鼓励编程初学者持之以恒地学习提升。

摘要由CSDN通过智能技术生成

下面是HTML代码，JS代码过多，所以我就以文件的形式给大家放上面了，大家登陆账号下载就可以学习代码了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>编程特趣</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
body, html {
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>

</head>
<body>

//Indention is a bit f*d up

//Set animation frame
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var canvas = $('#canvas')[0],
ctx = canvas.getContext('2d'),
canvasW = $(document).width(),
canvasH = $(document).height();

ctx.fillStyle = 'black';

canvas.width = canvasW;
canvas.height = canvasH;

var mouse = {
x: canvasW/2,
y: canvasH/2,
dx: 0,
dy: 0
};

var emitter = {
h: 50,
x: canvasW/2-250,
y: canvasH/2,
vx: 5,
vy: 5,
v: 0.05,
dx: 0,
dy: 0
};

var stops = [50, 150, 160, 300, 500],
stopIndex = 0,
delay = 0,
prog = 0;

var circle = {
radius: 125,
angle: 0
};

var particles = new Array();

var rate = 2,
time = 0,
frameIndex = rate;

var simplex = new SimplexNoise(),
simplexVal = 0,
simplexStart = 20;

//Start loop
draw();

//Draw
function draw() {

ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0,0,0,0.5)';
ctx.fillRect(0, 0, canvasW, canvasH);
ctx.globalCompositeOperation = 'lighter';

//Draw loading
ctx.fillStyle = '#000';
ctx.fillRect(canvasW/2-250, emitter.y-emitter.h/2, 500, emitter.h);
ctx.strokeStyle = 'rgba(0,255,0,0.5)';
ctx.strokeRect(canvasW/2-250, emitter.y-emitter.h/2, 500, emitter.h);
ctx.font = '20pt Arial';
ctx.fillStyle = 'rgba(0,255,0,0.5)';
ctx.fillText(Math.floor(prog/5)+'%', canvasW/2-20, canvasH/2+10);

//Move emitter
//console.log(stops[stopIndex]+' '+prog+' '+delay);
if(stops[stopIndex] == prog) {
stopIndex ++;
delay = 50;
} else {
if(delay == 0 && prog < stops[stopIndex]) {
emitter.dx = -1;
emitter.x += 2;
prog += 2;
} else {
emitter.dx = 0;
delay --;
}
}

//Draw emitter
ctx.fillStyle = '#0f0';
ctx.fillRect(emitter.x, emitter.y-emitter.h/2, 1, emitter.h);

//Draw particles
var i = 0;
for(i in particles) {
var p = particles[i];

//Check if die
if(time > p.die) {
p.o -= 0.01;
if(p.o < 0) {
particles.splice(i, 1);
}
}

//Add v
p.x += p.vx;
p.y += p.vy;

//Add source move
p.x += p.sourcedx / 10;
p.y += p.sourcedy / 10;

//Simplex noise
if(p.simplexIndex > simplexStart) {
p.simplexVal = simplex.noise3D(p.x/100, p.y/100, time/100);
}

p.simplexIndex ++;
p.x += p.simplexVal;
p.y += p.simplexVal;

//If (almost) outside canvas
if(p.x < 0+20 || p.x > canvasW-20) {
p.vx *= -1.015;
}
if(p.y < 0+20 || p.y > canvasH-20) {
p.vy *= -1.015;
}

ctx.beginPath();
ctx.fillStyle = 'rgba(0, '+p.green+', 0, '+p.o+')';
ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, true);
ctx.fill();
ctx.save();
}

//if emitter is moving
if(emitter.dx !== 0) {
for(var i=0; i<rate; i++) {
//Create particle
var particle = {
x: emitter.x,
y: emitter.y+(Math.random()*emitter.h-emitter.h/2),
r: Math.random()+0.5,
vx: (Math.random()*-2),
vy: (Math.random()-0.5),
o: 1,
birth: time,
die: time+(Math.random()*50+50),//1+1),
sourcedx: emitter.dx,
sourcedy: emitter.dy,

最低0.47元/天解锁文章

奔梦向前

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
奔梦向前-代码实现加载中网页炫酷特效-2020-04-29

下面是HTML代码，JS代码过多，所以我就以文件的形式给大家放上面了，大家登陆账号下载就可以学习代码了。<!doctype html><html><head><meta charset="utf-8"><title>编程特趣</title><script type="text/javascript" src...
复制链接

扫一扫