зеркало из https://github.com/mozilla/spark-eol.git
Added two small particle systems for background phones. Added animated Spark.
This commit is contained in:
sork
Родитель
0dfc81f700
Коммит
2db2b65c68
|
|
@ -56,7 +56,7 @@
|
|||
<span class="number">162</span>
|
||||
<span class="title">{{ _('<em>Countries</em> Sparked') }}</span>
|
||||
</div>
|
||||
<canvas id="particles" height="380" width="350"></canvas>
|
||||
<canvas id="particles"></canvas>
|
||||
<div id="light-ray"></div>
|
||||
<canvas id="spark"></canvas>
|
||||
<div id="phone">
|
||||
|
|
|
|||
|
|
@ -4,17 +4,19 @@ $(document).ready(function() {
|
|||
spark = new Section('spark', '#spark-content', 'spark-1'),
|
||||
firefox = new Section('firefox', '#firefox-content', 'layer-1'),
|
||||
currentSection,
|
||||
lightParticles;
|
||||
lights, spark;
|
||||
|
||||
TWEEN.start();
|
||||
|
||||
home.onHide(function() {
|
||||
lightParticles.pause();
|
||||
lights.pause();
|
||||
spark.pause();
|
||||
});
|
||||
|
||||
home.onShow(function() {
|
||||
setTimeout(function() {
|
||||
lightParticles.play();
|
||||
lights.play();
|
||||
spark.play();
|
||||
}, 400);
|
||||
});
|
||||
|
||||
|
|
@ -175,5 +177,6 @@ $(document).ready(function() {
|
|||
|
||||
initNewsletterForm();
|
||||
|
||||
lightParticles = new ParticleSystem('light', '/media/img/particle.png', 40, 250, 366, 20);
|
||||
lights = new Lights('particles', '/media/img/particle.png', 13, 380, 350);
|
||||
spark = new Spark('spark', 200, 300);
|
||||
});
|
||||
|
|
@ -1,31 +1,24 @@
|
|||
var ParticleSystem = Class.extend({
|
||||
init: function(canvasId, spritePath, spriteSize, width, height, nbParticles) {
|
||||
var self = this;
|
||||
init: function(context, sprite, spriteSize, x, y, width, height, nbParticles) {
|
||||
|
||||
this.canvas = document.getElementById(canvasId),
|
||||
this.ctx = this.canvas.getContext('2d'),
|
||||
this.w = width,
|
||||
this.h = height,
|
||||
this.particleSprite = new Image(),
|
||||
this.particleSprite.src = spritePath;
|
||||
this.particles = [],
|
||||
this.ctx = context;
|
||||
this.sprite = sprite;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.w = width;
|
||||
this.h = height;
|
||||
this.spriteSize = spriteSize;
|
||||
this.particles = [];
|
||||
this.NB_PARTICLES = nbParticles;
|
||||
|
||||
this.canvas.height = this.h;
|
||||
this.canvas.width = this.w;
|
||||
|
||||
for(var i = 0; i < this.NB_PARTICLES; i += 1) {
|
||||
this.spawnParticle();
|
||||
};
|
||||
|
||||
this.particleSprite.onload = function() {
|
||||
self.play();
|
||||
};
|
||||
},
|
||||
|
||||
spawnParticle: function() {
|
||||
this.particles.push({ xPos: Math.round(rand(0, 220)),
|
||||
yPos: rand(300, 320),
|
||||
this.particles.push({ xPos: Math.round(rand(0, this.w)),
|
||||
yPos: rand(this.h - 20, this.h),
|
||||
yStep: rand(0.5, 5),
|
||||
alpha: rand(0, 1) });
|
||||
},
|
||||
|
|
@ -50,23 +43,55 @@ var ParticleSystem = Class.extend({
|
|||
draw: function() {
|
||||
var p, ctx = this.ctx;
|
||||
|
||||
ctx.clearRect(0, 0, this.w, this.h);
|
||||
for(var i = 0, nb = this.particles.length; i < nb; i += 1) {
|
||||
p = this.particles[i];
|
||||
ctx.save();
|
||||
ctx.globalAlpha = p.alpha;
|
||||
ctx.drawImage(this.particleSprite, p.xPos, p.yPos);
|
||||
ctx.drawImage(this.sprite, this.x + p.xPos, this.y + p.yPos, this.spriteSize, this.spriteSize);
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var Lights = Class.extend({
|
||||
init: function(canvasId, spritePath, spriteSize, width, height) {
|
||||
var self = this;
|
||||
|
||||
this.canvas = document.getElementById(canvasId);
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
this.w = width;
|
||||
this.h = height;
|
||||
this.particleSprite = new Image();
|
||||
this.particleSprite.src = spritePath;
|
||||
|
||||
this.canvas.width = this.w;
|
||||
this.canvas.height = this.h;
|
||||
|
||||
this.systems = [];
|
||||
|
||||
this.particleSprite.onload = function() {
|
||||
self.systems.push(new ParticleSystem(self.ctx, self.particleSprite, 13, 0, 0, 205, 320, 20));
|
||||
self.systems.push(new ParticleSystem(self.ctx, self.particleSprite, 7, 220, -100, 80, 260, 15));
|
||||
self.systems.push(new ParticleSystem(self.ctx, self.particleSprite, 5, 60, -100, 50, 260, 15));
|
||||
self.play();
|
||||
};
|
||||
},
|
||||
|
||||
forEachSystem: function(callback) {
|
||||
for(var i = 0; i < 3; i++) {
|
||||
callback(this.systems[i]);
|
||||
}
|
||||
},
|
||||
|
||||
play: function() {
|
||||
var self = this;
|
||||
|
||||
this.animation = setInterval(function() {
|
||||
self.update();
|
||||
self.draw();
|
||||
console.log('play');
|
||||
self.ctx.clearRect(0, 0, self.w, self.h);
|
||||
self.forEachSystem(function(system) {
|
||||
system.update();
|
||||
system.draw();
|
||||
});
|
||||
}, 1000 / 60);
|
||||
},
|
||||
|
||||
|
|
@ -74,3 +99,4 @@ var ParticleSystem = Class.extend({
|
|||
clearInterval(this.animation);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
var Spark = Class.extend({
|
||||
init: function(canvasId, h, w) {
|
||||
var canvas = document.getElementById(canvasId),
|
||||
red = '232, 57, 57',
|
||||
orange = '252, 174, 70',
|
||||
yellow = '247, 227, 94';
|
||||
|
||||
this.h = h;
|
||||
this.w = w;
|
||||
canvas.height = this.h;
|
||||
canvas.width = this.w;
|
||||
this.ctx = canvas.getContext('2d');
|
||||
this.shapes = [{ arcAngle: 88, angle: -55, angleStep: -0.6, minAngle: 30, maxAngle: 160, rgb: red, scale: 1.2, scaleStep: 0.005, minScale: 1.1, maxScale: 1.25 },
|
||||
{ arcAngle: 85, angle: -85, angleStep: -0.6, minAngle: 60, maxAngle: 170, rgb: red, scale: 0.95, scaleStep: 0.005, minScale: 0.9, maxScale: 1.1 },
|
||||
{ arcAngle: 60, angle: -10, angleStep: -0.6, minAngle: 5, maxAngle: 90, rgb: red, scale: 0.92, scaleStep: 0.005, minScale: 0.85, maxScale: 1.0 },
|
||||
{ arcAngle: 90, angle: -90, angleStep: -0.6, minAngle: 80, maxAngle: 180, rgb: orange, scale: 0.55, scaleStep: 0.005, minScale: 0.45, maxScale: 0.6 },
|
||||
{ arcAngle: 95, angle: 0, angleStep: -0.6, minAngle: -10, maxAngle: 100, rgb: orange, scale: 0.4, scaleStep: 0.005, minScale: 0.35, maxScale: 0.5 },
|
||||
{ arcAngle: 50, angle: -110, angleStep: -0.6, minAngle: 90, maxAngle: 170, rgb: orange, scale: 0.7, scaleStep: 0.005, minScale: 0.6, maxScale: 0.75 },
|
||||
{ arcAngle: 90, angle: -12, angleStep: -0.6, minAngle: 5, maxAngle: 130, rgb: orange, scale: 0.75, scaleStep: 0.005, minScale: 0.7, maxScale: 0.8 },
|
||||
{ arcAngle: 80, angle: -50, angleStep: -0.75, minAngle: 25, maxAngle: 145, rgb: yellow, scale: 0.32, scaleStep: 0.005, minScale: 0.3, maxScale: 0.4 },
|
||||
{ arcAngle: 90, angle: -90, angleStep: -0.015, minAngle: 80, maxAngle: 200, rgb: yellow, scale: 0.2, scaleStep: 0.005, minScale: 0.2, maxScale: 0.3 },
|
||||
{ arcAngle: 30, angle: -22, angleStep: 1, minAngle: 10, maxAngle: 160, rgb: yellow, scale: 0.28, scaleStep: 0.005, minScale: 0.2, maxScale: 0.3 }];
|
||||
|
||||
this.play();
|
||||
},
|
||||
|
||||
update: function() {
|
||||
var dice, s;
|
||||
|
||||
for(var i = 0, nb = this.shapes.length; i < nb; i += 1) {
|
||||
s = this.shapes[i];
|
||||
dice = rand(1, 20);
|
||||
|
||||
s.moveFactor = 1-(i / 6);
|
||||
|
||||
if(Math.abs(s.angle) > (s.maxAngle - s.arcAngle) || Math.abs(s.angle) < s.minAngle || dice === 6) {
|
||||
s.angleStep *= -1;
|
||||
}
|
||||
s.angle += s.angleStep * rand(1, 2);
|
||||
|
||||
if(s.scale > s.maxScale || s.scale < s.minScale || dice === 1) {
|
||||
s.scaleStep *= -1;
|
||||
}
|
||||
s.scale += s.scaleStep * rand(1, 2);
|
||||
}
|
||||
},
|
||||
|
||||
draw: function() {
|
||||
var shape, ctx = this.ctx;
|
||||
|
||||
for(i = 0, nb = this.shapes.length; i < nb; i += 1) {
|
||||
shape = this.shapes[i];
|
||||
|
||||
ctx.save();
|
||||
ctx.shadowBlur = 30;
|
||||
ctx.shadowColor = "rgba(0, 0, 0, 0.1)";
|
||||
ctx.fillStyle = "rgba("+shape.rgb+", 0.8)";
|
||||
ctx.translate(this.w / 2, this.h);
|
||||
ctx.rotate(deg2rad(shape.angle));
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.arc(0, 0, 100 * shape.scale, 0, -deg2rad(shape.arcAngle), true);
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
},
|
||||
|
||||
play: function() {
|
||||
var self = this;
|
||||
|
||||
this.animation = setInterval(function() {
|
||||
self.ctx.clearRect(0, 0, self.w, self.h);
|
||||
self.update();
|
||||
self.draw();
|
||||
}, 1000 / 60);
|
||||
},
|
||||
|
||||
pause: function() {
|
||||
clearInterval(this.animation);
|
||||
}
|
||||
});
|
||||
|
|
@ -185,6 +185,7 @@ MINIFY_BUNDLES = {
|
|||
'js/desktop/popups.js',
|
||||
'js/desktop/newsletter.js',
|
||||
'js/desktop/particles.js',
|
||||
'js/desktop/spark.js',
|
||||
'js/desktop/main.js',
|
||||
),
|
||||
'mobile': (
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче