chen 2021-11-19 15:30:46 +08:00
commit af46da168b
9 changed files with 411 additions and 37 deletions

BIN
.DS_Store vendored

Binary file not shown.

76
css/animate.css vendored
View File

@ -18,13 +18,29 @@
opacity: 0;
}
}
/*全屏抖动*/
@keyframes scale-body{
0%{
transform: scale(1);
}
100%{
33%{
transform: scale(1.01);
}
66%{
transform: scale(1);
}
72%{
transform: scale(1.01);
}
80%{
transform: scale(1);
}
88%{
transform: scale(1.01);
}
100%{
transform: scale(1);
}
}
@keyframes scale{
0%{
@ -421,75 +437,85 @@
}
}
/*镜头拉近*/
@keyframes scale-left{
0{
transform:scale(1,1);
transform-origin:left 90%;
transform-origin:0rem 18.75rem;
}
10%{
1%{
transform:scale(1.4,1.4);
transform-origin:left 90%;
transform-origin:0rem 18.75rem;
}
90%{
40%{
transform:scale(1.4,1.4);
transform-origin:right 90%;
transform-origin:100% 18.75rem;
}
70%{
transform-origin:50% 50%;
transform: scale(0.9,0.9);
}
100%{
transform-origin:right 90%;
transform:scale(1,1);
transform-origin:50% 50%;
transform: scale(1,1);
}
}
@keyframes scale-right{
0{
transform:scale(1,1);
transform-origin:right 90%;
transform-origin:100% 18.75rem;
}
10%{
1%{
transform:scale(1.4,1.4);
transform-origin:right 90%;
transform-origin:100% 18.75rem;
}
90%{
transform:scale(1.4,1.4);
transform-origin:left 90%;
transform-origin:0 18.75rem;
}
100%{
transform-origin:left 90%;
transform-origin:0 18.75rem;
transform:scale(1,1);
}
}
@keyframes scale-bottom-right{
0{
transform:scale(1,1);
transform-origin:right 200%;
transform-origin:100% 43.75rem;
}
10%{
1%{
transform:scale(1.4,1.4);
transform-origin:right 200%;
transform-origin:100% 43.75rem;
}
90%{
40%{
transform:scale(1.4,1.4);
transform-origin:left 200%;
transform-origin:0 43.75rem;
}
70%{
transform-origin:50% 50%;
transform: scale(0.9,0.9);
}
100%{
transform-origin:left 200%;
transform:scale(1,1);
transform-origin:50% 50%;
transform: scale(1,1);
}
}
@keyframes scale-bottom-left{
0{
transform:scale(1,1);
transform-origin:left 200%;
transform-origin:0 43.75rem;
}
10%{
1%{
transform:scale(1.4,1.4);
transform-origin:left 200%;
transform-origin:0 43.75rem;
}
90%{
transform:scale(1.4,1.4);
transform-origin:right 200%;
transform-origin:100% 43.75rem;
}
100%{
transform-origin:right 200%;
transform-origin:100% 43.75rem;
transform:scale(1,1);
}
}

View File

@ -139,13 +139,13 @@ input, textarea, select {
}
/*镜头拉近*/
.scale-left{
animation: scale-left 8s linear normal;
animation: scale-left 12s linear normal;
}
.scale-right{
animation: scale-right 8s linear normal;
}
.scale-bottom-right{
animation: scale-bottom-right 8s linear normal;
animation: scale-bottom-right 12s linear normal;
}
.scale-bottom-left{
animation: scale-bottom-left 8s linear normal;
@ -156,6 +156,16 @@ body{
height: 100%;
background: url(../image/img_01.png) no-repeat;
overflow: hidden;
animation: scale-body .6s linear infinite;
top:0px;
position: absolute;
}
.ground-bg{
background: url(../image/img_0x.png) no-repeat;
width: 100%;
height: 100%;
/* transform: scale(0.9,0.9); */
}
.Lighting{
position: fixed;
@ -178,7 +188,6 @@ body{
transform:rotateX(69deg) scale(1.3,1.3);
margin-left: -720px;
animation:blendmode 20s linear infinite;
transform:
}
.ground-light .ground-animate{
background-image: url(../image/img_02.png);
@ -301,7 +310,7 @@ body{
position: absolute;
left: 0px;
z-index: 1;
animation: scale-body .4s linear infinite;
/* animation: scale-body .4s linear infinite; */
}
.dance-people{
position: absolute;
@ -400,3 +409,15 @@ body{
.dn{
display: none;
}
.w3-agilefireworks{
top: 0;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
}
.agilefireworks-bg{
height: 100vh;
width: 100%;
background: rgba(0,0,0,.2);
}

View File

@ -8,10 +8,12 @@
<link rel="stylesheet" type="text/css" href="css/style-jq.css" />
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/custom.js" type="text/javascript" charset="utf-8"></script>
<body class=""><!--增加 class=" scale-right" 可使用从右向左镜头效果scale-left scale-bottom-left scale-bottom-right -->
<body>
<!--灯光-->
<div class="Lighting">
</div>
<!--增加 class=" scale-right" 可使用从右向左镜头效果scale-left scale-bottom-left scale-bottom-right -->
<div class=" ground-bg">
<!--地面灯光-->
<div class="ground-light">
<div class="ground-animate"></div>
@ -19,11 +21,16 @@
<!--舞台背景-->
<div class="stage">
<div class="video" >
<video id="mousedown" autoplay muted src="image/vd.mp4" ></video>
<video id="mousedown" loop autoplay muted src="image/vd.mp4" ></video>
</div>
<!--音乐-->
<audio controls autoplay loop muted style="z-index: 999; position: fixed;display: none;">
<source src="muz/829094.mp3" type="audio/mpeg">
</audio>
<!--点击播放音乐-->
<script>
document.body.addEventListener('mousedown', function(){
var vdo = $("video")[0]; //jquery
var vdo = $("audio")[0]; //jquery
vdo.muted = false;
}, false);
</script>
@ -35,7 +42,7 @@
<div class="speak speak-pink">
一起:起来嗨!
</div>
<div class="leading-dancer dancing-right">
<div class="leading-dancer dancing-Wobble-right">
</div>
<div class="table">
<img src="image/icon_01.png" />
@ -46,7 +53,7 @@
<!--大航海介绍-->
<div class="types">
<!-- <div class="name">
<p>送任意电池可获得荧光棒!<br /> 大航海排名前三可成为领舞!<br /> 领舞特权:切歌,镜头,统一动作”跳跃,旋转,向左,向右”, 一起喊“任意文字”,一起嗨:会下纸片
<p>送任意电池可获得荧光棒!<br /> 大航海排名前三可成为领舞!<br /> 领舞特权:切歌,镜头,统一动作”跳跃,旋转,向左,向右,向左抖腿,向右抖腿”, 一起喊“任意文字”
</p>
</div> -->
<div class="list">
@ -131,10 +138,26 @@
</div>
</div>
<!--舞池 end-->
</div>
</div>
<!--小纸片氛围js-->
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--小纸片氛围js-->
<!-- fireworks scripts -->
<!--
<div class="w3-agilefireworks">
<div class="agilefireworks-bg">
</div>
</div> -->
<script type="text/javascript" src="js/fireworks.js"></script>
<script>
setTimeout(function() {
$('.w3-agilefireworks').fireworks();
});
</script>
<!-- //fireworks scripts -->
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 469 KiB

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

@ -130,11 +130,11 @@ $(function(){
var actionIndex = Math.floor(Math.random()*actionArr.length);
var moveIndex = Math.floor(Math.random()*moveArr.length);
num++;
if(num==10){
if(num==200){
clearInterval(timer);
} else {
peopleObj(nameArr[nameIndex],sayArr[sayIndex],actionArr[actionIndex],moveArr[moveIndex]);
}
},000)
},0)
})

304
js/fireworks.js Normal file
View File

@ -0,0 +1,304 @@
/*
Adapted from http://jsfiddle.net/dtrooper/AceJJ/
TODO:
* Try to get rid of ghosting
* See if anything can be made more efficient
* Make the canvas fit in the z-order
*/
(function( $ ) {
var MAX_ROCKETS = 30,
MAX_PARTICLES = 500;
var FUNCTIONS = {
'init': function(element) {
var jqe = $(element);
// Check this element isn't already inited
if (jqe.data('fireworks_data') !== undefined) {
console.log('Looks like this element is already inited!');
return;
}
// Setup fireworks on this element
var canvas = document.createElement('canvas'),
canvas_buffer = document.createElement('canvas'),
data = {
'element': element,
'canvas': canvas,
'context': canvas.getContext('2d'),
'canvas_buffer': canvas_buffer,
'context_buffer': canvas_buffer.getContext('2d'),
'particles': [],
'rockets': []
};
// Add & position the canvas
if (jqe.css('position') === 'static') {
element.style.position = 'fixed';
}
element.appendChild(canvas);
canvas.style.position = 'absolute';
canvas.style.top = '0px';
canvas.style.bottom = '0px';
canvas.style.left = '0px';
canvas.style.right = '0px';
// Kickoff the loops
data.interval = setInterval(loop.bind(this, data), 1000 / 50);
// Save the data for later
jqe.data('fireworks_data', data);
},
'destroy': function(element) {
var jqe = $(element);
// Check this element isn't already inited
if (jqe.data('fireworks_data') === undefined) {
console.log('Looks like this element is not yet inited!');
return;
}
var data = jqe.data('fireworks_data');
jqe.removeData('fireworks_data');
// Stop the interval
clearInterval(data.interval);
// Remove the canvas
data.canvas.remove();
// Reset the elements positioning
data.element.style.position = '';
}
};
$.fn.fireworks = function(action) {
// Assume no action means we want to init
if (!action) {
action = 'init';
}
// Process each element
this.each(function() {
FUNCTIONS[action](this);
});
// Chaining ftw :)
return this;
};
function launch(data) {
if (data.rockets.length < MAX_ROCKETS) {
var rocket = new Rocket(data);
data.rockets.push(rocket);
}
}
function loop(data) {
// Launch a new rocket
launch(data);
// Update screen size
if (data.canvas_width != data.element.offsetWidth) {
data.canvas_width = data.canvas.width = data.canvas_buffer.width = data.element.offsetWidth;
}
if (data.canvas_height != data.element.offsetHeight) {
data.canvas_height = data.canvas.height = data.canvas_buffer.height = data.element.offsetHeight;
}
// Fade the background out slowly
data.context_buffer.clearRect(0, 0, data.canvas.width, data.canvas.height);
data.context_buffer.globalAlpha = 0.9;
data.context_buffer.drawImage(data.canvas, 0, 0);
data.context.clearRect(0, 0, data.canvas.width, data.canvas.height);
data.context.drawImage(data.canvas_buffer, 0, 0);
// Update the rockets
var existingRockets = [];
data.rockets.forEach(function(rocket) {
// update and render
rocket.update();
rocket.render(data.context);
// random chance of 1% if rockets is above the middle
var randomChance = rocket.pos.y < (data.canvas.height * 2 / 3) ? (Math.random() * 100 <= 1) : false;
/* Explosion rules
- 80% of screen
- going down
- close to the mouse
- 1% chance of random explosion
*/
if (rocket.pos.y < data.canvas.height / 5 || rocket.vel.y >= 0 || randomChance) {
rocket.explode(data);
} else {
existingRockets.push(rocket);
}
});
data.rockets = existingRockets;
// Update the particles
var existingParticles = [];
data.particles.forEach(function(particle) {
particle.update();
// render and save particles that can be rendered
if (particle.exists()) {
particle.render(data.context);
existingParticles.push(particle);
}
});
data.particles = existingParticles;
while (data.particles.length > MAX_PARTICLES) {
data.particles.shift();
}
}
function Particle(pos) {
this.pos = {
x: pos ? pos.x : 0,
y: pos ? pos.y : 0
};
this.vel = {
x: 0,
y: 0
};
this.shrink = .97;
this.size = 2;
this.resistance = 1;
this.gravity = 0;
this.flick = false;
this.alpha = 1;
this.fade = 0;
this.color = 0;
}
Particle.prototype.update = function() {
// apply resistance
this.vel.x *= this.resistance;
this.vel.y *= this.resistance;
// gravity down
this.vel.y += this.gravity;
// update position based on speed
this.pos.x += this.vel.x;
this.pos.y += this.vel.y;
// shrink
this.size *= this.shrink;
// fade out
this.alpha -= this.fade;
};
Particle.prototype.render = function(c) {
if (!this.exists()) {
return;
}
c.save();
c.globalCompositeOperation = 'lighter';
var x = this.pos.x,
y = this.pos.y,
r = this.size / 2;
var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");
c.fillStyle = gradient;
c.beginPath();
c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
c.closePath();
c.fill();
c.restore();
};
Particle.prototype.exists = function() {
return this.alpha >= 0.1 && this.size >= 1;
};
function Rocket(data) {
Particle.apply(
this,
[{
x: Math.random() * data.canvas.width * 2 / 3 + data.canvas.width / 6,
y: data.canvas.height
}]
);
this.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
this.vel.y = Math.random() * -3 - 4;
this.vel.x = Math.random() * 6 - 3;
this.size = 2;
this.shrink = 0.999;
this.gravity = 0.01;
}
Rocket.prototype = new Particle();
Rocket.prototype.constructor = Rocket;
Rocket.prototype.explode = function(data) {
var count = Math.random() * 10 + 80;
for (var i = 0; i < count; i++) {
var particle = new Particle(this.pos);
var angle = Math.random() * Math.PI * 2;
// emulate 3D effect by using cosine and put more particles in the middle
var speed = Math.cos(Math.random() * Math.PI / 2) * 15;
particle.vel.x = Math.cos(angle) * speed;
particle.vel.y = Math.sin(angle) * speed;
particle.size = 10;
particle.gravity = 0.2;
particle.resistance = 0.92;
particle.shrink = Math.random() * 0.05 + 0.93;
particle.flick = true;
particle.color = this.explosionColor;
data.particles.push(particle);
}
};
Rocket.prototype.render = function(c) {
if (!this.exists()) {
return;
}
c.save();
c.globalCompositeOperation = 'lighter';
var x = this.pos.x,
y = this.pos.y,
r = this.size / 2;
var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
gradient.addColorStop(0.2, "rgba(255, 180, 0, " + this.alpha + ")");
c.fillStyle = gradient;
c.beginPath();
c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
c.closePath();
c.fill();
c.restore();
};
}(jQuery));

BIN
muz/384076.mp3 Normal file

Binary file not shown.

BIN
muz/829094.mp3 Normal file

Binary file not shown.