Merge branch 'master' of http://git.scdxtc.com/chen/squareDancing
commit
af46da168b
|
|
@ -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-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-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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
35
dancing.html
35
dancing.html
|
|
@ -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>
|
||||
|
|
|
|||
BIN
image/img_0x.png
BIN
image/img_0x.png
Binary file not shown.
|
Before Width: | Height: | Size: 469 KiB After Width: | Height: | Size: 1.5 MiB |
|
|
@ -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)
|
||||
|
||||
})
|
||||
|
|
@ -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));
|
||||
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue