Jack Pearkes
commit
3a875a023e
|
|
@ -1,69 +1,67 @@
|
|||
// jshint node:true
|
||||
module.exports = function(grunt) {
|
||||
|
||||
// Configuration goes here
|
||||
grunt.initConfig({
|
||||
// Load plugins here
|
||||
grunt.loadNpmTasks('grunt-contrib-less');
|
||||
grunt.loadNpmTasks('grunt-contrib-clean');
|
||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-recess');
|
||||
|
||||
less: {
|
||||
development:{
|
||||
files: {
|
||||
"stylesheets/main.css": "stylesheets/main.less"
|
||||
}
|
||||
// Configuration goes here
|
||||
grunt.initConfig({
|
||||
|
||||
less: {
|
||||
development:{
|
||||
files: {
|
||||
"stylesheets/main.css": "stylesheets/main.less"
|
||||
}
|
||||
},
|
||||
|
||||
concat: {
|
||||
options: {
|
||||
separator: ';'
|
||||
},
|
||||
site: {
|
||||
src: [
|
||||
'javascripts/app/app.js',
|
||||
'javascripts/app/util.js',
|
||||
'javascripts/app/homepage.js'
|
||||
|
||||
],
|
||||
|
||||
dest: 'javascripts/app/deploy/site.js'
|
||||
},
|
||||
},
|
||||
|
||||
uglify: {
|
||||
app: {
|
||||
files: {
|
||||
'javascripts/app/deploy/site.min.js': ['javascripts/app/deploy/site.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
less: {
|
||||
files: 'stylesheets/*.less',
|
||||
tasks: ['less']
|
||||
},
|
||||
js: {
|
||||
files: 'javascripts/app/*.js',
|
||||
tasks: ['concat', 'uglify']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
concat: {
|
||||
options: {
|
||||
separator: ';'
|
||||
},
|
||||
site: {
|
||||
src: [
|
||||
'javascripts/app/app.js',
|
||||
'javascripts/app/util.js',
|
||||
'javascripts/app/homepage.js'
|
||||
],
|
||||
dest: 'javascripts/app/deploy/site.js'
|
||||
},
|
||||
},
|
||||
|
||||
// Load plugins here
|
||||
grunt.loadNpmTasks('grunt-contrib-less');
|
||||
grunt.loadNpmTasks('grunt-contrib-clean');
|
||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-recess');
|
||||
uglify: {
|
||||
app: {
|
||||
files: {
|
||||
'javascripts/app/deploy/site.min.js': ['javascripts/app/deploy/site.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// JS distribution task.
|
||||
grunt.registerTask('dist-js', ['concat', 'uglify']);
|
||||
watch: {
|
||||
less: {
|
||||
files: 'stylesheets/*.less',
|
||||
tasks: ['less']
|
||||
},
|
||||
js: {
|
||||
files: 'javascripts/app/*.js',
|
||||
tasks: ['concat', 'uglify']
|
||||
}
|
||||
}
|
||||
|
||||
// Full distribution task.
|
||||
grunt.registerTask('dist', ['dist-js']);
|
||||
});
|
||||
|
||||
grunt.registerTask('default', ['watch']);
|
||||
// JS distribution task.
|
||||
grunt.registerTask('dist-js', ['concat', 'uglify']);
|
||||
|
||||
// Full distribution task.
|
||||
grunt.registerTask('dist', ['dist-js']);
|
||||
grunt.registerTask('default', ['watch']);
|
||||
|
||||
};
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
|
|
@ -1,20 +1,9 @@
|
|||
<!-- Main jumbotron for a primary marketing message or call to action -->
|
||||
<div id="jumbotron-mask">
|
||||
<div id="jumbotron">
|
||||
<div class="container">
|
||||
<div class="col-lg-6 col-md-6">
|
||||
<h2 class="rls-l">
|
||||
Service discovery and configuration made easy.
|
||||
Distributed, highly available, and
|
||||
datacenter-aware.
|
||||
</h2>
|
||||
</div>
|
||||
<div class="jumbo-logo-wrap col-lg-offset-1 col-lg-5 col-md-6 hidden-xs hidden-sm">
|
||||
<div class="jumbo-logo"></div>
|
||||
</div>
|
||||
<!-- <p><a class="btn btn-primary btn-lg">Learn more »</a></p> -->
|
||||
</div>
|
||||
<div class="jumbotron-dots"></div>
|
||||
<div class="jumbotron-content" id="jumbotron-content">
|
||||
<h2 class="tag-line" id="tag-line">Build, Combine, and Launch Infrastucture</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
(function(
|
||||
Particle,
|
||||
Engine,
|
||||
Vector
|
||||
){
|
||||
|
||||
Particle.Fixed = function(width, height){
|
||||
var targetX, targetY;
|
||||
|
||||
this.radius = Engine.getRandomFloat(0.1, 1);
|
||||
// this.fillA = 'rgba(136,67,237,' + Engine.getRandomFloat(0.4, 0.5) + ')';
|
||||
// this.fillB = 'rgba(136,67,237,' + Engine.getRandomFloat(0.51, 0.6) + ')';
|
||||
this.fillA = '#3a1066';
|
||||
this.fillB = '#561799';
|
||||
this.frameMax = Engine.getRandomInt(4, 10);
|
||||
|
||||
this.max = {
|
||||
x: width + this.maxRadius,
|
||||
y: height + this.maxRadius
|
||||
};
|
||||
|
||||
this.min = {
|
||||
x: 0 - this.maxRadius,
|
||||
y: 0 - this.maxRadius
|
||||
};
|
||||
|
||||
targetX = Engine.getRandomInt(0 + this.radius, width + this.radius);
|
||||
targetY = Engine.getRandomInt(0 + this.radius, height + this.radius);
|
||||
|
||||
this.pos = new Vector(targetX, targetY);
|
||||
};
|
||||
|
||||
Engine.Particle.Fixed.prototype = {
|
||||
|
||||
radius: 1,
|
||||
|
||||
pos: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
frame: 0,
|
||||
showA: false,
|
||||
|
||||
update: function(engine){
|
||||
this.frame++;
|
||||
if (this.frame > this.frameMax) {
|
||||
this.frame = 0;
|
||||
this.showA = !this.showA;
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
draw: function(ctx, scale){
|
||||
// Draw a circle - far less performant
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
this.pos.x * scale >> 0,
|
||||
this.pos.y * scale >> 0,
|
||||
this.radius * scale,
|
||||
0,
|
||||
Math.PI * 2,
|
||||
false
|
||||
);
|
||||
if (this.showA) {
|
||||
ctx.fillStyle = this.fillA;
|
||||
} else {
|
||||
ctx.fillStyle = this.fillB;
|
||||
}
|
||||
ctx.fill();
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(window.Engine.Particle, window.Engine, window.Vector);
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
(function(
|
||||
Engine,
|
||||
Vector
|
||||
){
|
||||
|
||||
Engine.Particle = function(width, height){
|
||||
var side, targetX, targetY;
|
||||
this.accel = Vector.coerce(this.accel);
|
||||
this.vel = Vector.coerce(this.vel);
|
||||
this.pos = new Vector(0, 0);
|
||||
|
||||
this.maxRadius = Engine.getRandomFloat(0.1, 2.5);
|
||||
// this.maxSpeed = Engine.getRandomFloat(0.01, 1000);
|
||||
this.maxSpeed = Engine.getRandomFloat(20, 1000);
|
||||
|
||||
// Pick a random target
|
||||
side = Engine.getRandomInt(0, 3);
|
||||
if (side === 0 || side === 2) {
|
||||
targetY = (side === 0) ? -(height / 2) : (height / 2);
|
||||
targetX = Engine.getRandomInt(-(width / 2), width / 2);
|
||||
} else {
|
||||
targetY = Engine.getRandomInt(-(height / 2), height / 2);
|
||||
targetX = (side === 3) ? -(width / 2) : (width / 2);
|
||||
}
|
||||
|
||||
this.target = new Vector(targetX, targetY);
|
||||
this.getAccelVector();
|
||||
|
||||
this.maxDistance = this.distanceTo(this.target);
|
||||
|
||||
this.fillA = '#8750c2';
|
||||
this.fillB = '#b976ff';
|
||||
this.frameMax = Engine.getRandomInt(1, 5);
|
||||
};
|
||||
|
||||
Engine.Particle.prototype = {
|
||||
|
||||
radius: 1,
|
||||
|
||||
frame: 0,
|
||||
showA: false,
|
||||
|
||||
accel: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
vel: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
pos: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
opacity: 1,
|
||||
|
||||
maxSpeed: 1500,
|
||||
maxForce: 1500,
|
||||
|
||||
getAccelVector: function(){
|
||||
this.accel = Vector.sub(this.target, this.pos)
|
||||
.normalize()
|
||||
.mult(this.maxSpeed);
|
||||
},
|
||||
|
||||
update: function(engine){
|
||||
var distancePercent, halfWidth, halfHeight;
|
||||
|
||||
this.vel
|
||||
.add(this.accel)
|
||||
.limit(this.maxSpeed);
|
||||
|
||||
this.pos.add(Vector.mult(this.vel, engine.tick));
|
||||
|
||||
halfWidth = engine.width / 2 + this.maxRadius;
|
||||
halfHeight = engine.height / 2 + this.maxRadius;
|
||||
|
||||
if (
|
||||
this.pos.x < -(halfWidth) ||
|
||||
this.pos.x > halfWidth ||
|
||||
this.pos.y < -(halfHeight) ||
|
||||
this.pos.y > halfHeight
|
||||
) {
|
||||
this.kill(engine);
|
||||
}
|
||||
|
||||
distancePercent = (this.maxDistance - this.distanceTo(this.target)) / this.maxDistance;
|
||||
this.radius = Math.max(0.1, this.maxRadius * distancePercent);
|
||||
|
||||
this.frame++;
|
||||
if (this.frame > this.frameMax) {
|
||||
this.frame = 0;
|
||||
this.showA = !this.showA;
|
||||
}
|
||||
|
||||
if (this.showA) {
|
||||
engine.particlesA[engine.particlesA.length] = this;
|
||||
} else {
|
||||
engine.particlesB[engine.particlesB.length] = this;
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
draw: function(ctx, scale){
|
||||
if (this.radius < 0.25) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.showA) {
|
||||
ctx.fillStyle = this.fillA;
|
||||
} else {
|
||||
ctx.fillStyle = this.fillB;
|
||||
}
|
||||
|
||||
// Draw a square - very performant
|
||||
ctx.fillRect(
|
||||
this.pos.x * scale >> 0,
|
||||
this.pos.y * scale >> 0,
|
||||
this.radius * scale,
|
||||
this.radius * scale
|
||||
);
|
||||
|
||||
// Draw a circle - far less performant
|
||||
// ctx.beginPath();
|
||||
// ctx.arc(
|
||||
// this.pos.x * scale,
|
||||
// this.pos.y * scale,
|
||||
// this.radius * scale,
|
||||
// 0,
|
||||
// Math.PI * 2,
|
||||
// false
|
||||
// );
|
||||
// ctx.fill();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
kill: function(engine){
|
||||
engine._deferredParticles.push(this);
|
||||
return this;
|
||||
},
|
||||
|
||||
distanceTo: function(target) {
|
||||
var xd = this.pos.x - target.x;
|
||||
var yd = this.pos.y - target.y;
|
||||
return Math.sqrt(xd * xd + yd * yd );
|
||||
}
|
||||
};
|
||||
|
||||
})(window.Engine, window.Vector);
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
(function(
|
||||
Engine,
|
||||
Vector
|
||||
){
|
||||
|
||||
Engine.Point.Puller = function(id, x, y, shapeSize){
|
||||
this.id = id;
|
||||
|
||||
this.shapeSize = shapeSize;
|
||||
this.ref = new Vector(x, y);
|
||||
|
||||
this.pos = new Vector(
|
||||
x * shapeSize.x,
|
||||
y * shapeSize.y
|
||||
);
|
||||
|
||||
this.home = this.pos.clone();
|
||||
this.accel = Vector.coerce(this.accel);
|
||||
this.vel = Vector.coerce(this.vel);
|
||||
};
|
||||
|
||||
Engine.Point.Puller.prototype = {
|
||||
|
||||
fillStyle: null,
|
||||
defaultFillstyle: '#b976ff',
|
||||
chasingFillstyle: '#ff6b6b',
|
||||
|
||||
radius: 1,
|
||||
|
||||
maxSpeed: 160,
|
||||
maxForce: 50,
|
||||
|
||||
pos: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
accel: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
vel: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
aRad: 200,
|
||||
|
||||
safety: 0.25,
|
||||
|
||||
resize: function(){
|
||||
this.home.x = this.pos.x = this.ref.x * this.shapeSize.x;
|
||||
this.home.y = this.pos.y = this.ref.y * this.shapeSize.y;
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
update: function(engine){
|
||||
var target = Vector.coerce(engine.mouse),
|
||||
distanceToMouse, toHome, mag, safety;
|
||||
|
||||
target.x += (this.shapeSize.x - engine.width) / 2;
|
||||
target.y += (this.shapeSize.y - engine.height) / 2;
|
||||
|
||||
distanceToMouse = this.distanceTo(target);
|
||||
|
||||
this.accel.mult(0);
|
||||
|
||||
if (distanceToMouse < this.aRad) {
|
||||
this._chasing = true;
|
||||
this.toChase(target);
|
||||
this.fillStyle = this.chasingFillstyle;
|
||||
} else {
|
||||
this._chasing = false;
|
||||
this.fillStyle = this.defaultFillstyle;
|
||||
}
|
||||
|
||||
this.toChase(this.home, this.maxForce / 2);
|
||||
|
||||
this.vel.add(this.accel);
|
||||
this.pos.add(
|
||||
Vector.mult(this.vel, engine.tick)
|
||||
);
|
||||
|
||||
toHome = Vector.sub(this.home, this.pos);
|
||||
mag = toHome.mag();
|
||||
safety = this.aRad * (this.safety * 3);
|
||||
if (mag > this.aRad - safety) {
|
||||
toHome.normalize();
|
||||
toHome.mult(this.aRad - safety);
|
||||
this.pos = Vector.sub(this.home, toHome);
|
||||
}
|
||||
|
||||
target = null;
|
||||
toHome = null;
|
||||
return this;
|
||||
},
|
||||
|
||||
toChase: function(target, maxForce){
|
||||
var desired, steer, distance, mult, safety;
|
||||
|
||||
maxForce = maxForce || this.maxForce;
|
||||
|
||||
target = Vector.coerce(target);
|
||||
desired = Vector.sub(target, this.pos);
|
||||
distance = desired.mag();
|
||||
desired.normalize();
|
||||
|
||||
safety = this.aRad * this.safety;
|
||||
|
||||
if (distance < safety) {
|
||||
mult = Engine.map(distance, 0, safety, 0, this.maxSpeed);
|
||||
} else if (distance > this.aRad - safety){
|
||||
mult = Engine.map(this.aRad - distance, 0, safety, 0, this.maxSpeed);
|
||||
} else {
|
||||
mult = this.maxSpeed;
|
||||
}
|
||||
|
||||
desired.mult(mult);
|
||||
|
||||
steer = Vector.sub(desired, this.vel);
|
||||
steer.limit(maxForce);
|
||||
this.accel.add(steer);
|
||||
|
||||
target = null;
|
||||
desired = null;
|
||||
steer = null;
|
||||
},
|
||||
|
||||
draw: function(ctx, scale){
|
||||
ctx.fillStyle = this.fillStyle;
|
||||
ctx.fillRect(
|
||||
(this.pos.x - this.radius / 2) * scale >> 0,
|
||||
(this.pos.y - this.radius / 2) * scale >> 0,
|
||||
this.radius * scale,
|
||||
this.radius * scale
|
||||
);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
distanceTo: function(target) {
|
||||
var xd = this.home.x - target.x;
|
||||
var yd = this.home.y - target.y;
|
||||
return Math.sqrt(xd * xd + yd * yd );
|
||||
}
|
||||
};
|
||||
|
||||
})(
|
||||
window.Engine,
|
||||
window.Vector
|
||||
);
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
(function(
|
||||
Engine,
|
||||
Vector
|
||||
){ 'use strict';
|
||||
|
||||
Engine.Point = function(id, x, y, shapeSize){
|
||||
this.id = id;
|
||||
|
||||
this.shapeSize = shapeSize;
|
||||
this.ref = new Vector(x, y);
|
||||
|
||||
this.pos = new Vector(
|
||||
x * shapeSize.x,
|
||||
y * shapeSize.y
|
||||
);
|
||||
|
||||
this.target = this.pos.clone();
|
||||
this.pos.x = shapeSize.x / 2;
|
||||
this.pos.y = shapeSize.y / 2;
|
||||
this.accel = Vector.coerce(this.accel);
|
||||
this.vel = Vector.coerce(this.vel);
|
||||
|
||||
this.stiffness = Engine.getRandomFloat(150, 600);
|
||||
this.friction = Engine.getRandomFloat(12, 18);
|
||||
};
|
||||
|
||||
Engine.Point.prototype = {
|
||||
|
||||
radius: 1,
|
||||
|
||||
stiffness : 200,
|
||||
friction : 13,
|
||||
threshold : 0.03,
|
||||
|
||||
pos: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
accel: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
vel : {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
target: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
resize: function(){
|
||||
this.target.x = this.pos.x = this.ref.x * this.shapeSize.x;
|
||||
this.target.y = this.pos.y = this.ref.y * this.shapeSize.y;
|
||||
},
|
||||
|
||||
updateBreathingPhysics: function(){
|
||||
this.stiffness = Engine.getRandomFloat(2, 4);
|
||||
this.friction = Engine.getRandomFloat(1, 2);
|
||||
},
|
||||
|
||||
updateTarget: function(newSize){
|
||||
var diff;
|
||||
|
||||
this.target.x = this.ref.x * newSize.x;
|
||||
this.target.y = this.ref.y * newSize.y;
|
||||
|
||||
diff = Vector.sub(newSize, this.shapeSize).div(2);
|
||||
|
||||
this.target.sub(diff);
|
||||
|
||||
this.target.add({
|
||||
x: Engine.getRandomFloat(-3, 3),
|
||||
y: Engine.getRandomFloat(-3, 3)
|
||||
});
|
||||
},
|
||||
|
||||
update: function(engine){
|
||||
var newAccel;
|
||||
|
||||
newAccel = Vector.sub(this.target, this.pos)
|
||||
.mult(this.stiffness)
|
||||
.sub(Vector.mult(this.vel, this.friction));
|
||||
|
||||
this.accel.set(newAccel);
|
||||
|
||||
this.vel.add(Vector.mult(this.accel, engine.tick));
|
||||
|
||||
this.pos.add(
|
||||
Vector.mult(this.vel, engine.tick)
|
||||
);
|
||||
|
||||
newAccel = null;
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
draw: function(ctx, scale){
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
this.pos.x * scale,
|
||||
this.pos.y * scale,
|
||||
this.radius * scale,
|
||||
0,
|
||||
Math.PI * 2,
|
||||
false
|
||||
);
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fill();
|
||||
return this;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(window.Engine, window.Vector);
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
(function(
|
||||
Engine,
|
||||
Vector
|
||||
){
|
||||
|
||||
Engine.Polygon.Puller = function(a, b, c, color, simple){
|
||||
this.a = a;
|
||||
this.b = b;
|
||||
this.c = c;
|
||||
|
||||
this.strokeStyle = '#ffffff';
|
||||
};
|
||||
|
||||
Engine.Polygon.Puller.prototype = {
|
||||
|
||||
checkChasing: function(){
|
||||
if (
|
||||
this.a._chasing === true &&
|
||||
this.b._chasing === true &&
|
||||
this.c._chasing === true
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(window.Engine, window.Vector);
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
(function(
|
||||
Engine,
|
||||
Vector
|
||||
){
|
||||
|
||||
Engine.Polygon = function(a, b, c, color, strokeColor){
|
||||
this.a = a;
|
||||
this.b = b;
|
||||
this.c = c;
|
||||
|
||||
this.color = Engine.clone(color);
|
||||
this.strokeColor = strokeColor ? Engine.clone(strokeColor) : Engine.clone(color);
|
||||
|
||||
if (strokeColor) {
|
||||
this.strokeColor = Engine.clone(strokeColor);
|
||||
} else {
|
||||
this.strokeColor = Engine.clone(color);
|
||||
}
|
||||
|
||||
this.strokeWidth = 0.25;
|
||||
this.maxStrokeS = this.strokeColor.s;
|
||||
this.maxStrokeL = this.strokeColor.l;
|
||||
this.maxColorL = this.color.l;
|
||||
|
||||
this.strokeColor.s = 0;
|
||||
this.strokeColor.l = 100;
|
||||
this.color.l = 0;
|
||||
|
||||
this.fillStyle = this.hslaTemplate.substitute(this.color);
|
||||
this.strokeStyle = this.hslaTemplate.substitute(this.strokeColor);
|
||||
};
|
||||
|
||||
Engine.Polygon.prototype = {
|
||||
|
||||
rgbaTemplate: 'rgba({r},{g},{b},{a})',
|
||||
hslaTemplate: 'hsla({h},{s}%,{l}%,{a})',
|
||||
|
||||
hueShiftSpeed: 20,
|
||||
duration: 2,
|
||||
delay: 0,
|
||||
start: 0,
|
||||
|
||||
// Determine color fill?
|
||||
update: function(engine){
|
||||
var delta;
|
||||
|
||||
if (this.simple) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.start += engine.tick;
|
||||
|
||||
delta = this.start;
|
||||
|
||||
if (
|
||||
delta > this.delay &&
|
||||
delta < this.delay + this.duration + 1 &&
|
||||
this.color.l < this.maxColorL
|
||||
) {
|
||||
this.color.l = this.maxColorL * (delta - this.delay) / this.duration;
|
||||
|
||||
this.strokeColor.s = this.maxStrokeS * (delta - this.delay) / this.duration;
|
||||
this.strokeColor.l = (this.maxStrokeL - 100) * (delta - this.delay) / this.duration + 100;
|
||||
|
||||
this.strokeWidth = 1.5 * (delta - this.delay) / this.duration + 0.25;
|
||||
|
||||
if (this.color.l > this.maxColorL) {
|
||||
this.color.l = this.maxColorL;
|
||||
this.strokeColor.l = this.maxStrokeL;
|
||||
this.strokeWidth = 1.5;
|
||||
}
|
||||
|
||||
this.strokeStyle = this.hslaTemplate.substitute(this.strokeColor);
|
||||
this.fillStyle = this.hslaTemplate.substitute(this.color);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(window.Engine, window.Vector);
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
(function(
|
||||
Engine,
|
||||
Point,
|
||||
Polygon,
|
||||
Vector
|
||||
){
|
||||
|
||||
Engine.Shape.Puller = function(width, height, json){
|
||||
var i, ref, point, poly;
|
||||
|
||||
this.pos = new Vector(0, 0);
|
||||
this.size = new Vector(width, height);
|
||||
this.heightRatio = json.data.width / json.data.height;
|
||||
this.widthRatio = json.data.ar;
|
||||
|
||||
this.resize(width, height, true);
|
||||
|
||||
ref = {};
|
||||
this.points = [];
|
||||
this.polygons = [];
|
||||
|
||||
for (i = 0; i < json.points.length; i++) {
|
||||
point = new Point(
|
||||
json.points[i].id,
|
||||
json.points[i].x,
|
||||
json.points[i].y,
|
||||
this.size
|
||||
);
|
||||
ref[point.id] = point;
|
||||
this.points.push(point);
|
||||
}
|
||||
|
||||
for (i = 0; i < json.polygons.length; i++) {
|
||||
poly = json.polygons[i];
|
||||
this.polygons.push(new Polygon(
|
||||
ref[poly.points[0]],
|
||||
ref[poly.points[1]],
|
||||
ref[poly.points[2]],
|
||||
poly.color
|
||||
));
|
||||
this.polygons[this.polygons.length - 1].noFill = true;
|
||||
}
|
||||
|
||||
this.ref = undefined;
|
||||
};
|
||||
|
||||
Engine.Shape.Puller.prototype = {
|
||||
|
||||
alpha: 0,
|
||||
|
||||
sizeOffset: 100,
|
||||
|
||||
resize: function(width, height, sizeOnly){
|
||||
var len, p, newWidth, newHeight;
|
||||
|
||||
newHeight = height + this.sizeOffset;
|
||||
newWidth = this.size.y * this.heightRatio;
|
||||
|
||||
if (newWidth < width) {
|
||||
newWidth = width + this.sizeOffset;
|
||||
newHeight = newWidth * this.widthRatio;
|
||||
}
|
||||
|
||||
this.size.y = newHeight;
|
||||
this.size.x = newWidth;
|
||||
|
||||
this.pos.x = -(newWidth / 2);
|
||||
this.pos.y = -(newHeight / 2);
|
||||
|
||||
if (sizeOnly) {
|
||||
return this;
|
||||
}
|
||||
|
||||
for (p = 0, len = this.points.length; p < len; p++) {
|
||||
this.points[p].resize();
|
||||
}
|
||||
},
|
||||
|
||||
update: function(engine){
|
||||
var p;
|
||||
|
||||
for (p = 0; p < this.points.length; p++) {
|
||||
this.points[p].update(engine);
|
||||
}
|
||||
|
||||
if (this.alpha < 1) {
|
||||
this.alpha = Math.min(this.alpha + 2 * engine.tick, 1);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
draw: function(ctx, scale, engine){
|
||||
var p, poly;
|
||||
|
||||
ctx.translate(
|
||||
this.pos.x * scale >> 0,
|
||||
this.pos.y * scale >> 0
|
||||
);
|
||||
|
||||
if (this.alpha < 1) {
|
||||
ctx.globalAlpha = this.alpha;
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
for (p = 0; p < this.polygons.length; p++) {
|
||||
poly = this.polygons[p];
|
||||
ctx.moveTo(
|
||||
poly.a.pos.x * scale >> 0,
|
||||
poly.a.pos.y * scale >> 0
|
||||
);
|
||||
ctx.lineTo(
|
||||
poly.b.pos.x * scale >> 0,
|
||||
poly.b.pos.y * scale >> 0
|
||||
);
|
||||
ctx.lineTo(
|
||||
poly.c.pos.x * scale >> 0,
|
||||
poly.c.pos.y * scale >> 0
|
||||
);
|
||||
ctx.lineTo(
|
||||
poly.a.pos.x * scale >> 0,
|
||||
poly.a.pos.y * scale >> 0
|
||||
);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.lineWidth = 0.4 * scale;
|
||||
ctx.strokeStyle = 'rgba(108,0,243,0.3)';
|
||||
ctx.stroke();
|
||||
|
||||
if (this.alpha < 1) {
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
|
||||
for (p = 0; p < this.points.length; p++) {
|
||||
this.points[p].draw(ctx, scale);
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
for (p = 0; p < this.polygons.length; p++) {
|
||||
if (this.polygons[p].checkChasing()) {
|
||||
poly = this.polygons[p];
|
||||
ctx.moveTo(
|
||||
poly.a.pos.x * scale >> 0,
|
||||
poly.a.pos.y * scale >> 0
|
||||
);
|
||||
ctx.lineTo(
|
||||
poly.b.pos.x * scale >> 0,
|
||||
poly.b.pos.y * scale >> 0
|
||||
);
|
||||
ctx.lineTo(
|
||||
poly.c.pos.x * scale >> 0,
|
||||
poly.c.pos.y * scale >> 0
|
||||
);
|
||||
ctx.lineTo(
|
||||
poly.a.pos.x * scale >> 0,
|
||||
poly.a.pos.y * scale >> 0
|
||||
);
|
||||
}
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = 'rgba(108,0,243,0.1)';
|
||||
ctx.fill();
|
||||
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
ctx.translate(
|
||||
engine.width / 2 * engine.scale >> 0,
|
||||
engine.height / 2 * engine.scale >> 0
|
||||
);
|
||||
return this;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(
|
||||
window.Engine,
|
||||
window.Engine.Point.Puller,
|
||||
window.Engine.Polygon.Puller,
|
||||
window.Vector
|
||||
);
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
(function(
|
||||
Engine,
|
||||
Point,
|
||||
Polygon,
|
||||
Vector
|
||||
){
|
||||
|
||||
Engine.Shape = function(x, y, width, height, points, polygons){
|
||||
var i, ref, point, poly;
|
||||
|
||||
this.pos = new Vector(x, y);
|
||||
this.size = new Vector(width, height);
|
||||
this.sizeRef = this.size.clone();
|
||||
|
||||
ref = {};
|
||||
this.points = [];
|
||||
this.polygons = [];
|
||||
|
||||
for (i = 0; i < points.length; i++) {
|
||||
point = new Point(
|
||||
points[i].id,
|
||||
points[i].x,
|
||||
points[i].y,
|
||||
this.size
|
||||
);
|
||||
ref[point.id] = point;
|
||||
this.points.push(point);
|
||||
}
|
||||
|
||||
for (i = 0; i < polygons.length; i++) {
|
||||
poly = polygons[i];
|
||||
this.polygons.push(new Polygon(
|
||||
ref[poly.points[0]],
|
||||
ref[poly.points[1]],
|
||||
ref[poly.points[2]],
|
||||
poly.color,
|
||||
poly.stroke
|
||||
));
|
||||
}
|
||||
};
|
||||
|
||||
Engine.Shape.prototype = {
|
||||
|
||||
breathing: false,
|
||||
|
||||
breath: 0,
|
||||
breathLength: 1,
|
||||
breatheIn: false,
|
||||
|
||||
resize: function(newSize, offset){
|
||||
var len, p;
|
||||
|
||||
this.size.x = newSize;
|
||||
this.size.y = newSize;
|
||||
|
||||
this.pos.x = -(newSize / 2);
|
||||
this.pos.y = -(newSize / 2 + offset);
|
||||
|
||||
for (p = 0, len = this.points.length; p < len; p++) {
|
||||
this.points[p].resize();
|
||||
}
|
||||
},
|
||||
|
||||
startBreathing: function(){
|
||||
var p;
|
||||
|
||||
this.breathing = true;
|
||||
this.breath = this.breathLength;
|
||||
|
||||
for (p = 0; p < this.points.length; p++) {
|
||||
this.points[p].updateBreathingPhysics();
|
||||
}
|
||||
},
|
||||
|
||||
breathe: function(tick){
|
||||
var p, scale, newSize;
|
||||
|
||||
this.breath += tick;
|
||||
|
||||
if (this.breath < this.breathLength) {
|
||||
return;
|
||||
}
|
||||
|
||||
scale = 1;
|
||||
|
||||
newSize = Vector.mult(this.sizeRef, scale);
|
||||
|
||||
for (p = 0; p < this.points.length; p++) {
|
||||
this.points[p].updateTarget(newSize);
|
||||
}
|
||||
|
||||
this.breath = 0;
|
||||
},
|
||||
|
||||
update: function(engine){
|
||||
var p;
|
||||
|
||||
if (this.breathing === true) {
|
||||
this.breathe(engine.tick);
|
||||
}
|
||||
|
||||
for (p = 0; p < this.points.length; p++) {
|
||||
this.points[p].update(engine);
|
||||
}
|
||||
|
||||
for (p = 0; p < this.polygons.length; p++) {
|
||||
this.polygons[p].update(engine);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
draw: function(ctx, scale, engine){
|
||||
var p, poly;
|
||||
|
||||
ctx.translate(
|
||||
this.pos.x * scale >> 0,
|
||||
this.pos.y * scale >> 0
|
||||
);
|
||||
for (p = 0; p < this.polygons.length; p++) {
|
||||
poly = this.polygons[p];
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(
|
||||
poly.a.pos.x * scale,
|
||||
poly.a.pos.y * scale
|
||||
);
|
||||
ctx.lineTo(
|
||||
poly.b.pos.x * scale,
|
||||
poly.b.pos.y * scale
|
||||
);
|
||||
ctx.lineTo(
|
||||
poly.c.pos.x * scale,
|
||||
poly.c.pos.y * scale
|
||||
);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = poly.fillStyle;
|
||||
ctx.fill();
|
||||
ctx.lineWidth = poly.strokeWidth * scale;
|
||||
ctx.strokeStyle = poly.strokeStyle;
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
ctx.translate(
|
||||
engine.width / 2 * engine.scale >> 0,
|
||||
engine.height / 2 * engine.scale >> 0
|
||||
);
|
||||
return this;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(
|
||||
window.Engine,
|
||||
window.Engine.Point,
|
||||
window.Engine.Polygon,
|
||||
window.Vector
|
||||
);
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
/* jshint unused:false */
|
||||
/* global console */
|
||||
(function(Engine){ 'use strict';
|
||||
|
||||
Engine.Typewriter = function(element){
|
||||
this.element = element;
|
||||
this.content = this.element.textContent.split('');
|
||||
this.element.innerHTML = '';
|
||||
};
|
||||
|
||||
Engine.Typewriter.prototype = {
|
||||
|
||||
running: false,
|
||||
|
||||
letterInterval : 0.02,
|
||||
spaceInterval : 0.4,
|
||||
|
||||
charCount: -1,
|
||||
waitSpace: false,
|
||||
|
||||
toDraw: '',
|
||||
|
||||
start: function(){
|
||||
if (!this.content.length) {
|
||||
return this;
|
||||
}
|
||||
|
||||
this._last = this.letterInterval;
|
||||
this.running = true;
|
||||
},
|
||||
|
||||
update: function(engine){
|
||||
var newChar;
|
||||
|
||||
if (!this.running) {
|
||||
return this;
|
||||
}
|
||||
|
||||
this._last += engine.tick;
|
||||
|
||||
if (this.waitSpace && this._last < this.spaceInterval) {
|
||||
return this;
|
||||
}
|
||||
|
||||
if (!this.waitSpace && this._last < this.letterInterval){
|
||||
return this;
|
||||
}
|
||||
|
||||
this._last = 0;
|
||||
newChar = this.content.shift();
|
||||
this.toDraw += newChar;
|
||||
|
||||
if (newChar === ',') {
|
||||
this.waitSpace = true;
|
||||
} else {
|
||||
this.waitSpace = false;
|
||||
}
|
||||
|
||||
this.element.innerHTML = this.toDraw + '<span class="cursor">_</span>';
|
||||
|
||||
if (!this.content.length) {
|
||||
this.running = false;
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(window.Engine);
|
||||
|
|
@ -0,0 +1,381 @@
|
|||
(function(
|
||||
Base,
|
||||
Vector,
|
||||
Logo,
|
||||
Grid,
|
||||
Chainable
|
||||
){
|
||||
|
||||
var sqrt, pow, Engine;
|
||||
|
||||
if (!window.requestAnimationFrame) {
|
||||
window.requestAnimationFrame = (function(){
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
function( callback ){
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
})();
|
||||
}
|
||||
|
||||
sqrt = Math.sqrt;
|
||||
pow = Math.pow;
|
||||
|
||||
Engine = Base.extend({
|
||||
|
||||
scale: window.devicePixelRatio || 1,
|
||||
// scale:1,
|
||||
|
||||
shapes : [],
|
||||
particles : [],
|
||||
particlesA : [],
|
||||
particlesB : [],
|
||||
|
||||
_deferredParticles: [],
|
||||
|
||||
ticks: [],
|
||||
|
||||
starGeneratorRate: 600,
|
||||
|
||||
mouse: {
|
||||
x: -9999,
|
||||
y: -9999
|
||||
},
|
||||
|
||||
constructor: function(canvas, background, tagLine){
|
||||
this.canvas = canvas;
|
||||
this.background = background;
|
||||
this.tagLine = tagLine;
|
||||
|
||||
if (!this.canvas.getContext) {
|
||||
return null;
|
||||
}
|
||||
|
||||
this.context = this.canvas.getContext('2d');
|
||||
|
||||
this.setupEvents();
|
||||
this.setupStarfield();
|
||||
this.setupTessellation();
|
||||
this.setupMisc();
|
||||
|
||||
this.startEngine();
|
||||
},
|
||||
|
||||
startEngine: function(){
|
||||
var parent = this.canvas.parentNode;
|
||||
|
||||
this.background.className += ' show';
|
||||
this.canvas.style.opacity = 1;
|
||||
|
||||
new Chainable()
|
||||
.wait(1000)
|
||||
.then(function(){
|
||||
this.starGeneratorRate = 200;
|
||||
}, this)
|
||||
.wait(500)
|
||||
.then(function(){
|
||||
parent.className += ' state-one';
|
||||
})
|
||||
.wait(150)
|
||||
.then(function(){
|
||||
parent.className += ' state-two';
|
||||
})
|
||||
.wait(150)
|
||||
.then(function(){
|
||||
parent.className += ' state-three';
|
||||
})
|
||||
.wait(500)
|
||||
.then(function(){
|
||||
parent.className += ' state-four';
|
||||
})
|
||||
.wait(100)
|
||||
.then(function(){
|
||||
this.showShapes = true;
|
||||
}, this)
|
||||
.wait(800)
|
||||
.then(function(){
|
||||
this.logo.startBreathing();
|
||||
}, this)
|
||||
.wait(200)
|
||||
.then(function(){
|
||||
this.showGrid = true;
|
||||
}, this)
|
||||
.wait(1000)
|
||||
.then(function(){
|
||||
this.typewriter.start();
|
||||
}, this);
|
||||
|
||||
this.render();
|
||||
},
|
||||
|
||||
|
||||
setupMisc: function(){
|
||||
this.last = Date.now() / 1000;
|
||||
this.render = this.render.bind(this);
|
||||
|
||||
this.typewriter = new Engine.Typewriter(this.tagLine);
|
||||
},
|
||||
|
||||
setupEvents: function(){
|
||||
this.resize = this.resize.bind(this);
|
||||
this.resize();
|
||||
window.addEventListener('resize', this.resize, false);
|
||||
|
||||
this._handleScroll = this._handleScroll.bind(this);
|
||||
this._handleScroll();
|
||||
window.addEventListener('scroll', this._handleScroll, false);
|
||||
|
||||
this._handleMouseCoords = this._handleMouseCoords.bind(this);
|
||||
window.addEventListener('mousemove', this._handleMouseCoords, false);
|
||||
},
|
||||
|
||||
setupStarfield: function(){
|
||||
this.particles = [];
|
||||
// this.generateParticles(50, true);
|
||||
this.generateParticles(400);
|
||||
},
|
||||
|
||||
setupTessellation: function(canvas){
|
||||
var size, offset;
|
||||
this.shapes = [];
|
||||
if (window.innerWidth < 570) {
|
||||
size = 300;
|
||||
offset = 0;
|
||||
} else {
|
||||
size = 360;
|
||||
offset = 40;
|
||||
}
|
||||
|
||||
this.logo = new Engine.Shape(
|
||||
-(size / 2),
|
||||
-(size / 2 + offset),
|
||||
size,
|
||||
size,
|
||||
Logo.points,
|
||||
Logo.polygons
|
||||
);
|
||||
|
||||
this.grid = new Engine.Shape.Puller(this.width, this.height, Grid);
|
||||
},
|
||||
|
||||
|
||||
getAverageTickTime: function(){
|
||||
var sum = 0, s;
|
||||
|
||||
for (s = 0; s < this.ticks.length; s++) {
|
||||
sum += this.ticks[s];
|
||||
}
|
||||
|
||||
window.console.log('Average Tick Time:', sum / this.ticks.length);
|
||||
},
|
||||
|
||||
getLongestTick: function(){
|
||||
var max = 0, index, s;
|
||||
|
||||
for (s = 0; s < this.ticks.length; s++) {
|
||||
if (this.ticks[s] > max) {
|
||||
max = this.ticks[s];
|
||||
index = s;
|
||||
}
|
||||
}
|
||||
|
||||
window.console.log('Max tick was:', max, 'at index:', index);
|
||||
},
|
||||
|
||||
render: function(){
|
||||
var scale = this.scale, p, particle, index;
|
||||
|
||||
if (this.paused) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.scrollY > this.height) {
|
||||
window.requestAnimationFrame(this.render);
|
||||
return;
|
||||
}
|
||||
|
||||
this.context.clearRect(
|
||||
-(this.width / 2) * scale,
|
||||
-(this.height / 2) * scale,
|
||||
this.width * scale,
|
||||
this.height * scale
|
||||
);
|
||||
|
||||
this.now = Date.now() / 1000;
|
||||
this.tick = Math.min(this.now - this.last, 0.017);
|
||||
|
||||
// Update all particles... may need to be optimized
|
||||
for (p = 0; p < this.particles.length; p++) {
|
||||
this.particles[p].update(this);
|
||||
}
|
||||
|
||||
// Batch render particles based on color
|
||||
// to prevent unneeded context state change
|
||||
this.context.fillStyle = '#8750c2';
|
||||
for (p = 0; p < this.particlesA.length; p++) {
|
||||
particle = this.particlesA[p];
|
||||
|
||||
if (particle.radius < 0.25) {
|
||||
continue;
|
||||
}
|
||||
this.context.fillRect(
|
||||
particle.pos.x * scale >> 0,
|
||||
particle.pos.y * scale >> 0,
|
||||
particle.radius * scale,
|
||||
particle.radius * scale
|
||||
);
|
||||
}
|
||||
|
||||
this.context.fillStyle = '#b976ff';
|
||||
for (p = 0; p < this.particlesB.length; p++) {
|
||||
particle = this.particlesB[p];
|
||||
|
||||
if (particle.radius < 0.25) {
|
||||
continue;
|
||||
}
|
||||
this.context.fillRect(
|
||||
particle.pos.x * scale >> 0,
|
||||
particle.pos.y * scale >> 0,
|
||||
particle.radius * scale,
|
||||
particle.radius * scale
|
||||
);
|
||||
}
|
||||
|
||||
this.particlesA.length = 0;
|
||||
this.particlesB.length = 0;
|
||||
|
||||
// Remove destroyed particles
|
||||
for (p = 0; p < this._deferredParticles.length; p++) {
|
||||
index = this.particles.indexOf(this._deferredParticles.pop());
|
||||
if (index >= 0) {
|
||||
this.particles.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.showGrid) {
|
||||
this.grid
|
||||
.update(this)
|
||||
.draw(this.context, scale, this);
|
||||
}
|
||||
|
||||
if (this.showShapes) {
|
||||
this.logo
|
||||
.update(this)
|
||||
.draw(this.context, scale, this);
|
||||
}
|
||||
|
||||
this.typewriter.update(this);
|
||||
|
||||
this.last = this.now;
|
||||
|
||||
this.generateParticles(this.starGeneratorRate * this.tick >> 0);
|
||||
|
||||
window.requestAnimationFrame(this.render);
|
||||
},
|
||||
|
||||
generateParticles: function(num, fixed){
|
||||
var p;
|
||||
|
||||
for (p = 0; p < num; p++) {
|
||||
if (fixed) {
|
||||
this.particles.push(new Engine.Particle.Fixed(this.width, this.height));
|
||||
} else {
|
||||
this.particles.push(new Engine.Particle(this.width, this.height));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
resize: function(){
|
||||
var scale = this.scale,
|
||||
size, offset;
|
||||
|
||||
if (window.innerWidth < 570) {
|
||||
this.height = 560;
|
||||
} else {
|
||||
this.height = 700;
|
||||
}
|
||||
|
||||
this.width = window.innerWidth;
|
||||
|
||||
this.canvas.width = this.width * scale;
|
||||
this.canvas.height = this.height * scale;
|
||||
|
||||
this.context.translate(
|
||||
this.width / 2 * scale >> 0,
|
||||
this.height / 2 * scale >> 0
|
||||
);
|
||||
this.context.lineJoin = 'bevel';
|
||||
|
||||
if (this.grid) {
|
||||
this.grid.resize(this.width, this.height);
|
||||
}
|
||||
|
||||
if (this.logo) {
|
||||
if (this.height === 560) {
|
||||
size = 300;
|
||||
offset = 0;
|
||||
} else {
|
||||
size = 360;
|
||||
offset = 40;
|
||||
}
|
||||
this.logo.resize(size, offset);
|
||||
}
|
||||
},
|
||||
|
||||
_handleMouseCoords: function(event){
|
||||
this.mouse.x = event.pageX;
|
||||
this.mouse.y = event.pageY;
|
||||
},
|
||||
|
||||
_handleScroll: function(){
|
||||
this.scrollY = window.scrollY;
|
||||
},
|
||||
|
||||
pause: function(){
|
||||
this.paused = true;
|
||||
},
|
||||
|
||||
resume: function(){
|
||||
if (!this.paused) {
|
||||
return;
|
||||
}
|
||||
this.paused = false;
|
||||
this.render();
|
||||
},
|
||||
|
||||
getSnapshot: function(){
|
||||
window.open(this.canvas.toDataURL('image/png'));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Engine.map = function(val, istart, istop, ostart, ostop) {
|
||||
return ostart + (ostop - ostart) * ((val - istart) / (istop - istart));
|
||||
};
|
||||
|
||||
Engine.getRandomFloat = function(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
};
|
||||
|
||||
Engine.getRandomInt = function(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
};
|
||||
|
||||
Engine.clone = function(ref) {
|
||||
var clone = {}, key;
|
||||
for (key in ref) {
|
||||
clone[key] = ref[key];
|
||||
}
|
||||
return clone;
|
||||
};
|
||||
|
||||
window.Engine = Engine;
|
||||
|
||||
})(
|
||||
window.Base,
|
||||
window.Vector,
|
||||
window.Logo,
|
||||
window.Grid,
|
||||
window.Chainable
|
||||
);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,84 @@
|
|||
(function(
|
||||
Engine
|
||||
){
|
||||
|
||||
// Quick and dirty IE detection
|
||||
var isIE = (function(){
|
||||
if (window.navigator.userAgent.match('Trident')) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})();
|
||||
|
||||
// isIE = true;
|
||||
|
||||
var Init = {
|
||||
|
||||
start: function(){
|
||||
var id = document.body.id.toLowerCase();
|
||||
|
||||
if (this.Pages[id]) {
|
||||
this.Pages[id]();
|
||||
}
|
||||
},
|
||||
|
||||
generateAnimatedLogo: function(){
|
||||
var container, x, block;
|
||||
|
||||
container = document.createElement('div');
|
||||
container.className = 'animated-logo';
|
||||
|
||||
for (x = 1; x < 5; x++) {
|
||||
block = document.createElement('div');
|
||||
block.className = 'white-block block-' + x;
|
||||
container.appendChild(block);
|
||||
}
|
||||
|
||||
return container;
|
||||
},
|
||||
|
||||
initializeEngine: function(){
|
||||
var jumbotron = document.getElementById('jumbotron'),
|
||||
content = document.getElementById('jumbotron-content'),
|
||||
tagLine = document.getElementById('tag-line'),
|
||||
canvas, galaxy;
|
||||
|
||||
if (!jumbotron) {
|
||||
return;
|
||||
}
|
||||
|
||||
galaxy = document.createElement('div');
|
||||
galaxy.id = 'galaxy-bg';
|
||||
galaxy.className = 'galaxy-bg';
|
||||
jumbotron.appendChild(galaxy);
|
||||
|
||||
content.appendChild(
|
||||
Init.generateAnimatedLogo()
|
||||
);
|
||||
|
||||
canvas = document.createElement('canvas');
|
||||
canvas.className = 'terraform-canvas';
|
||||
|
||||
jumbotron.appendChild(canvas);
|
||||
window.engine = new Engine(canvas, galaxy, tagLine);
|
||||
},
|
||||
|
||||
Pages: {
|
||||
'page-home': function(){
|
||||
var jumbotron;
|
||||
if (isIE) {
|
||||
jumbotron = document.getElementById('jumbotron');
|
||||
jumbotron.className += ' static';
|
||||
return;
|
||||
}
|
||||
|
||||
Init.initializeEngine();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Init.start();
|
||||
|
||||
})(window.Engine);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,136 @@
|
|||
(function(
|
||||
Engine,
|
||||
Vector
|
||||
){
|
||||
|
||||
var Puller = function(x, y){
|
||||
this.pos.x = x;
|
||||
this.pos.y = y;
|
||||
this.pos = Vector.coerce(this.pos);
|
||||
this.home = this.pos.clone();
|
||||
this.accel = Vector.coerce(this.accel);
|
||||
this.vel = Vector.coerce(this.vel);
|
||||
};
|
||||
|
||||
Puller.prototype = {
|
||||
|
||||
fillStyle: '#ffffff',
|
||||
radius: 5,
|
||||
|
||||
maxSpeed: 160,
|
||||
maxForce: 50,
|
||||
|
||||
pos: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
accel: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
vel: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
|
||||
aRad: 200,
|
||||
|
||||
safety: 0.25,
|
||||
|
||||
update: function(engine){
|
||||
var distanceToMouse = this.distanceTo(engine.mouse),
|
||||
toHome, mag, safety;
|
||||
// distanceToHome = this.distanceTo(this.home);
|
||||
|
||||
this.accel.mult(0);
|
||||
|
||||
if (distanceToMouse < this.aRad) {
|
||||
this.toChase(engine.mouse);
|
||||
}
|
||||
|
||||
this.toChase(this.home, this.maxForce / 2);
|
||||
|
||||
this.vel.add(this.accel);
|
||||
this.pos.add(
|
||||
Vector.mult(this.vel, engine.tick)
|
||||
);
|
||||
|
||||
toHome = Vector.sub(this.home, this.pos);
|
||||
mag = toHome.mag();
|
||||
safety = this.aRad * (this.safety * 3);
|
||||
if (mag > this.aRad - safety) {
|
||||
toHome.normalize();
|
||||
toHome.mult(this.aRad - safety);
|
||||
this.pos = Vector.sub(this.home, toHome);
|
||||
}
|
||||
},
|
||||
|
||||
toChase: function(target, maxForce){
|
||||
var desired, steer, distance, mult, safety;
|
||||
|
||||
maxForce = maxForce || this.maxForce;
|
||||
|
||||
target = Vector.coerce(target);
|
||||
desired = Vector.sub(target, this.pos);
|
||||
distance = desired.mag();
|
||||
desired.normalize();
|
||||
|
||||
safety = this.aRad * this.safety;
|
||||
|
||||
if (distance < safety) {
|
||||
mult = Engine.map(distance, 0, safety, 0, this.maxSpeed);
|
||||
} else if (distance > this.aRad - safety){
|
||||
mult = Engine.map(this.aRad - distance, 0, safety, 0, this.maxSpeed);
|
||||
} else {
|
||||
mult = this.maxSpeed;
|
||||
}
|
||||
|
||||
desired.mult(mult);
|
||||
|
||||
steer = Vector.sub(desired, this.vel);
|
||||
steer.limit(maxForce);
|
||||
this.accel.add(steer);
|
||||
},
|
||||
|
||||
draw: function(ctx, scale){
|
||||
// ctx.beginPath();
|
||||
// ctx.arc(
|
||||
// this.home.x * scale,
|
||||
// this.home.y * scale,
|
||||
// this.aRad * scale,
|
||||
// 0,
|
||||
// Math.PI * 2,
|
||||
// false
|
||||
// );
|
||||
// ctx.fillStyle = 'rgba(255,255,255,0.1)';
|
||||
// ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
this.pos.x * scale,
|
||||
this.pos.y * scale,
|
||||
this.radius * scale,
|
||||
0,
|
||||
Math.PI * 2,
|
||||
false
|
||||
);
|
||||
ctx.fillStyle = this.fillStyle;
|
||||
ctx.fill();
|
||||
|
||||
},
|
||||
|
||||
distanceTo: function(target) {
|
||||
var xd = this.home.x - target.x;
|
||||
var yd = this.home.y - target.y;
|
||||
return Math.sqrt(xd * xd + yd * yd );
|
||||
}
|
||||
};
|
||||
|
||||
window.Puller = Puller;
|
||||
|
||||
})(
|
||||
window.Engine,
|
||||
window.Vector
|
||||
);
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
//
|
||||
// app.js
|
||||
//
|
||||
|
||||
var APP = (function() {
|
||||
|
||||
function initialize (){
|
||||
APP.Utils.runIfClassNamePresent('page-home', initHome);
|
||||
}
|
||||
|
||||
function initHome() {
|
||||
APP.Homepage.init();
|
||||
}
|
||||
|
||||
//api
|
||||
return {
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
//
|
||||
// app.js
|
||||
//
|
||||
|
||||
var APP = (function() {
|
||||
|
||||
function initialize (){
|
||||
APP.Utils.runIfClassNamePresent('page-home', initHome);
|
||||
}
|
||||
|
||||
function initHome() {
|
||||
APP.Homepage.init();
|
||||
}
|
||||
|
||||
//api
|
||||
return {
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
})();
|
||||
;//
|
||||
// util.js
|
||||
//
|
||||
var APP = APP || {};
|
||||
|
||||
APP.Utils = (function () {
|
||||
return {
|
||||
//check for mobile user agents
|
||||
isMobile : (function(){
|
||||
if( navigator.userAgent.match(/Android/i)
|
||||
|| navigator.userAgent.match(/webOS/i)
|
||||
|| navigator.userAgent.match(/iPhone/i)
|
||||
//|| navigator.userAgent.match(/iPad/i)
|
||||
|| navigator.userAgent.match(/iPod/i)
|
||||
|| navigator.userAgent.match(/BlackBerry/i)
|
||||
|| navigator.userAgent.match(/Windows Phone/i)
|
||||
){
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
})(),
|
||||
|
||||
runIfClassNamePresent: function(selector, initFunction) {
|
||||
var elms = document.getElementsByClassName(selector);
|
||||
if (elms.length > 0) {
|
||||
initFunction();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}());;//homepage.js
|
||||
|
||||
var APP = APP || {};
|
||||
|
||||
(function () {
|
||||
APP.Homepage = (function () {
|
||||
return {
|
||||
|
||||
ui : null,
|
||||
|
||||
init: function () {
|
||||
var _this = this;
|
||||
|
||||
//cache elements
|
||||
this.ui = {
|
||||
$doc: $(window),
|
||||
$hero: $('#jumbotron'),
|
||||
$collapse: $('.navbar-collapse')
|
||||
}
|
||||
|
||||
this.addEventListeners();
|
||||
|
||||
},
|
||||
|
||||
addEventListeners: function(){
|
||||
var _this = this;
|
||||
|
||||
if(APP.Utils.isMobile)
|
||||
return;
|
||||
|
||||
_this.ui.$doc.scroll(function() {
|
||||
|
||||
//if collapseable menu is open dont do parrallax. It looks wonky. Bootstrap conflict
|
||||
if( _this.ui.$collapse.hasClass('in'))
|
||||
return;
|
||||
|
||||
var top = _this.ui.$doc.scrollTop(),
|
||||
speedAdj = (top*0.8),
|
||||
speedAdjOffset = speedAdj - top;
|
||||
|
||||
_this.ui.$hero.css('webkitTransform', 'translate(0, '+ speedAdj +'px)');
|
||||
_this.ui.$hero.find('.container').css('webkitTransform', 'translate(0, '+ speedAdjOffset +'px)');
|
||||
})
|
||||
}
|
||||
}
|
||||
}());
|
||||
|
||||
}(jQuery, this));
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
var APP=function(){function a(){APP.Utils.runIfClassNamePresent("page-home",b)}function b(){APP.Homepage.init()}return{initialize:a}}(),APP=APP||{};APP.Utils=function(){return{isMobile:function(){return navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/webOS/i)||navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/BlackBerry/i)||navigator.userAgent.match(/Windows Phone/i)?!0:!1}(),runIfClassNamePresent:function(a,b){var c=document.getElementsByClassName(a);c.length>0&&b()}}}();var APP=APP||{};!function(){APP.Homepage=function(){return{ui:null,init:function(){this.ui={$doc:$(window),$hero:$("#jumbotron"),$collapse:$(".navbar-collapse")},this.addEventListeners()},addEventListeners:function(){var a=this;APP.Utils.isMobile||a.ui.$doc.scroll(function(){if(!a.ui.$collapse.hasClass("in")){var b=a.ui.$doc.scrollTop(),c=.8*b,d=c-b;a.ui.$hero.css("webkitTransform","translate(0, "+c+"px)"),a.ui.$hero.find(".container").css("webkitTransform","translate(0, "+d+"px)")}})}}}()}(jQuery,this);
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
//homepage.js
|
||||
|
||||
var APP = APP || {};
|
||||
|
||||
(function () {
|
||||
APP.Homepage = (function () {
|
||||
return {
|
||||
|
||||
ui : null,
|
||||
|
||||
init: function () {
|
||||
var _this = this;
|
||||
|
||||
//cache elements
|
||||
this.ui = {
|
||||
$doc: $(window),
|
||||
$hero: $('#jumbotron'),
|
||||
$collapse: $('.navbar-collapse')
|
||||
}
|
||||
|
||||
this.addEventListeners();
|
||||
|
||||
},
|
||||
|
||||
addEventListeners: function(){
|
||||
var _this = this;
|
||||
|
||||
if(APP.Utils.isMobile)
|
||||
return;
|
||||
|
||||
_this.ui.$doc.scroll(function() {
|
||||
|
||||
//if collapseable menu is open dont do parrallax. It looks wonky. Bootstrap conflict
|
||||
if( _this.ui.$collapse.hasClass('in'))
|
||||
return;
|
||||
|
||||
var top = _this.ui.$doc.scrollTop(),
|
||||
speedAdj = (top*0.8),
|
||||
speedAdjOffset = speedAdj - top;
|
||||
|
||||
_this.ui.$hero.css('webkitTransform', 'translate(0, '+ speedAdj +'px)');
|
||||
_this.ui.$hero.find('.container').css('webkitTransform', 'translate(0, '+ speedAdjOffset +'px)');
|
||||
})
|
||||
}
|
||||
}
|
||||
}());
|
||||
|
||||
}(jQuery, this));
|
||||
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
//
|
||||
// util.js
|
||||
//
|
||||
var APP = APP || {};
|
||||
|
||||
APP.Utils = (function () {
|
||||
return {
|
||||
//check for mobile user agents
|
||||
isMobile : (function(){
|
||||
if( navigator.userAgent.match(/Android/i)
|
||||
|| navigator.userAgent.match(/webOS/i)
|
||||
|| navigator.userAgent.match(/iPhone/i)
|
||||
//|| navigator.userAgent.match(/iPad/i)
|
||||
|| navigator.userAgent.match(/iPod/i)
|
||||
|| navigator.userAgent.match(/BlackBerry/i)
|
||||
|| navigator.userAgent.match(/Windows Phone/i)
|
||||
){
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
})(),
|
||||
|
||||
runIfClassNamePresent: function(selector, initFunction) {
|
||||
var elms = document.getElementsByClassName(selector);
|
||||
if (elms.length > 0) {
|
||||
initFunction();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}());
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
/**
|
||||
* Classy - classy classes for JavaScript
|
||||
*
|
||||
* :copyright: (c) 2011 by Armin Ronacher.
|
||||
* :license: BSD.
|
||||
*/
|
||||
|
||||
;(function(undefined) {
|
||||
var
|
||||
CLASSY_VERSION = '1.4',
|
||||
root = this,
|
||||
old_class = root.Class,
|
||||
disable_constructor = false;
|
||||
|
||||
/* we check if $super is in use by a class if we can. But first we have to
|
||||
check if the JavaScript interpreter supports that. This also matches
|
||||
to false positives later, but that does not do any harm besides slightly
|
||||
slowing calls down. */
|
||||
var probe_super = (function(){$super();}).toString().indexOf('$super') > 0;
|
||||
function usesSuper(obj) {
|
||||
return !probe_super || /\B\$super\b/.test(obj.toString());
|
||||
}
|
||||
|
||||
/* helper function to set the attribute of something to a value or
|
||||
removes it if the value is undefined. */
|
||||
function setOrUnset(obj, key, value) {
|
||||
if (value === undefined)
|
||||
delete obj[key];
|
||||
else
|
||||
obj[key] = value;
|
||||
}
|
||||
|
||||
/* gets the own property of an object */
|
||||
function getOwnProperty(obj, name) {
|
||||
return Object.prototype.hasOwnProperty.call(obj, name)
|
||||
? obj[name] : undefined;
|
||||
}
|
||||
|
||||
/* instanciate a class without calling the constructor */
|
||||
function cheapNew(cls) {
|
||||
disable_constructor = true;
|
||||
var rv = new cls;
|
||||
disable_constructor = false;
|
||||
return rv;
|
||||
}
|
||||
|
||||
/* the base class we export */
|
||||
var Class = function() {};
|
||||
|
||||
/* restore the global Class name and pass it to a function. This allows
|
||||
different versions of the classy library to be used side by side and
|
||||
in combination with other libraries. */
|
||||
Class.$noConflict = function() {
|
||||
try {
|
||||
setOrUnset(root, 'Class', old_class);
|
||||
}
|
||||
catch (e) {
|
||||
// fix for IE that does not support delete on window
|
||||
root.Class = old_class;
|
||||
}
|
||||
return Class;
|
||||
};
|
||||
|
||||
/* what version of classy are we using? */
|
||||
Class.$classyVersion = CLASSY_VERSION;
|
||||
|
||||
/* extend functionality */
|
||||
Class.$extend = function(properties) {
|
||||
var super_prototype = this.prototype;
|
||||
|
||||
/* disable constructors and instanciate prototype. Because the
|
||||
prototype can't raise an exception when created, we are safe
|
||||
without a try/finally here. */
|
||||
var prototype = cheapNew(this);
|
||||
|
||||
/* copy all properties of the includes over if there are any */
|
||||
if (properties.__include__)
|
||||
for (var i = 0, n = properties.__include__.length; i != n; ++i) {
|
||||
var mixin = properties.__include__[i];
|
||||
for (var name in mixin) {
|
||||
var value = getOwnProperty(mixin, name);
|
||||
if (value !== undefined)
|
||||
prototype[name] = mixin[name];
|
||||
}
|
||||
}
|
||||
|
||||
/* copy class vars from the superclass */
|
||||
properties.__classvars__ = properties.__classvars__ || {};
|
||||
if (prototype.__classvars__)
|
||||
for (var key in prototype.__classvars__)
|
||||
if (!properties.__classvars__[key]) {
|
||||
var value = getOwnProperty(prototype.__classvars__, key);
|
||||
properties.__classvars__[key] = value;
|
||||
}
|
||||
|
||||
/* copy all properties over to the new prototype */
|
||||
for (var name in properties) {
|
||||
var value = getOwnProperty(properties, name);
|
||||
if (name === '__include__' ||
|
||||
value === undefined)
|
||||
continue;
|
||||
|
||||
prototype[name] = typeof value === 'function' && usesSuper(value) ?
|
||||
(function(meth, name) {
|
||||
return function() {
|
||||
var old_super = getOwnProperty(this, '$super');
|
||||
this.$super = super_prototype[name];
|
||||
try {
|
||||
return meth.apply(this, arguments);
|
||||
}
|
||||
finally {
|
||||
setOrUnset(this, '$super', old_super);
|
||||
}
|
||||
};
|
||||
})(value, name) : value
|
||||
}
|
||||
|
||||
/* dummy constructor */
|
||||
var rv = function() {
|
||||
if (disable_constructor)
|
||||
return;
|
||||
var proper_this = root === this ? cheapNew(arguments.callee) : this;
|
||||
if (proper_this.__init__)
|
||||
proper_this.__init__.apply(proper_this, arguments);
|
||||
proper_this.$class = rv;
|
||||
return proper_this;
|
||||
}
|
||||
|
||||
/* copy all class vars over of any */
|
||||
for (var key in properties.__classvars__) {
|
||||
var value = getOwnProperty(properties.__classvars__, key);
|
||||
if (value !== undefined)
|
||||
rv[key] = value;
|
||||
}
|
||||
|
||||
/* copy prototype and constructor over, reattach $extend and
|
||||
return the class */
|
||||
rv.prototype = prototype;
|
||||
rv.constructor = rv;
|
||||
rv.$extend = Class.$extend;
|
||||
rv.$withData = Class.$withData;
|
||||
return rv;
|
||||
};
|
||||
|
||||
/* instanciate with data functionality */
|
||||
Class.$withData = function(data) {
|
||||
var rv = cheapNew(this);
|
||||
for (var key in data) {
|
||||
var value = getOwnProperty(data, key);
|
||||
if (value !== undefined)
|
||||
rv[key] = value;
|
||||
}
|
||||
return rv;
|
||||
};
|
||||
|
||||
/* export the class */
|
||||
root.Class = Class;
|
||||
})();
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
/*
|
||||
Based on Base.js 1.1a (c) 2006-2010, Dean Edwards
|
||||
Updated to pass JSHint and converted into a module by Kenneth Powers
|
||||
License: http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
/*global define:true module:true*/
|
||||
/*jshint eqeqeq:true*/
|
||||
(function (name, global, definition) {
|
||||
if (typeof module !== 'undefined') {
|
||||
module.exports = definition();
|
||||
} else if (typeof define !== 'undefined' && typeof define.amd === 'object') {
|
||||
define(definition);
|
||||
} else {
|
||||
global[name] = definition();
|
||||
}
|
||||
})('Base', this, function () {
|
||||
// Base Object
|
||||
var Base = function () {};
|
||||
|
||||
// Implementation
|
||||
Base.extend = function (_instance, _static) { // subclass
|
||||
var extend = Base.prototype.extend;
|
||||
// build the prototype
|
||||
Base._prototyping = true;
|
||||
var proto = new this();
|
||||
extend.call(proto, _instance);
|
||||
proto.base = function () {
|
||||
// call this method from any other method to invoke that method's ancestor
|
||||
};
|
||||
delete Base._prototyping;
|
||||
// create the wrapper for the constructor function
|
||||
//var constructor = proto.constructor.valueOf(); //-dean
|
||||
var constructor = proto.constructor;
|
||||
var klass = proto.constructor = function () {
|
||||
if (!Base._prototyping) {
|
||||
if (this._constructing || this.constructor === klass) { // instantiation
|
||||
this._constructing = true;
|
||||
constructor.apply(this, arguments);
|
||||
delete this._constructing;
|
||||
} else if (arguments[0] !== null) { // casting
|
||||
return (arguments[0].extend || extend).call(arguments[0], proto);
|
||||
}
|
||||
}
|
||||
};
|
||||
// build the class interface
|
||||
klass.ancestor = this;
|
||||
klass.extend = this.extend;
|
||||
klass.forEach = this.forEach;
|
||||
klass.implement = this.implement;
|
||||
klass.prototype = proto;
|
||||
klass.toString = this.toString;
|
||||
klass.valueOf = function (type) {
|
||||
return (type === 'object') ? klass : constructor.valueOf();
|
||||
};
|
||||
extend.call(klass, _static);
|
||||
// class initialization
|
||||
if (typeof klass.init === 'function') klass.init();
|
||||
return klass;
|
||||
};
|
||||
|
||||
Base.prototype = {
|
||||
extend: function (source, value) {
|
||||
if (arguments.length > 1) { // extending with a name/value pair
|
||||
var ancestor = this[source];
|
||||
if (ancestor && (typeof value === 'function') && // overriding a method?
|
||||
// the valueOf() comparison is to avoid circular references
|
||||
(!ancestor.valueOf || ancestor.valueOf() !== value.valueOf()) && /\bbase\b/.test(value)) {
|
||||
// get the underlying method
|
||||
var method = value.valueOf();
|
||||
// override
|
||||
value = function () {
|
||||
var previous = this.base || Base.prototype.base;
|
||||
this.base = ancestor;
|
||||
var returnValue = method.apply(this, arguments);
|
||||
this.base = previous;
|
||||
return returnValue;
|
||||
};
|
||||
// point to the underlying method
|
||||
value.valueOf = function (type) {
|
||||
return (type === 'object') ? value : method;
|
||||
};
|
||||
value.toString = Base.toString;
|
||||
}
|
||||
this[source] = value;
|
||||
} else if (source) { // extending with an object literal
|
||||
var extend = Base.prototype.extend;
|
||||
// if this object has a customized extend method then use it
|
||||
if (!Base._prototyping && typeof this !== 'function') {
|
||||
extend = this.extend || extend;
|
||||
}
|
||||
var proto = {
|
||||
toSource: null
|
||||
};
|
||||
// do the "toString" and other methods manually
|
||||
var hidden = ['constructor', 'toString', 'valueOf'];
|
||||
// if we are prototyping then include the constructor
|
||||
for (var i = Base._prototyping ? 0 : 1; i < hidden.length; i++) {
|
||||
var h = hidden[i];
|
||||
if (source[h] !== proto[h])
|
||||
extend.call(this, h, source[h]);
|
||||
}
|
||||
// copy each of the source object's properties to this object
|
||||
for (var key in source) {
|
||||
if (!proto[key]) extend.call(this, key, source[key]);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
// initialize
|
||||
Base = Base.extend({
|
||||
constructor: function () {
|
||||
this.extend(arguments[0]);
|
||||
}
|
||||
}, {
|
||||
ancestor: Object,
|
||||
version: '1.1',
|
||||
forEach: function (object, block, context) {
|
||||
for (var key in object) {
|
||||
if (this.prototype[key] === undefined) {
|
||||
block.call(context, object[key], key, object);
|
||||
}
|
||||
}
|
||||
},
|
||||
implement: function () {
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
if (typeof arguments[i] === 'function') {
|
||||
// if it's a function, call it
|
||||
arguments[i](this.prototype);
|
||||
} else {
|
||||
// add the interface using the extend method
|
||||
this.prototype.extend(arguments[i]);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
toString: function () {
|
||||
return String(this.valueOf());
|
||||
}
|
||||
});
|
||||
|
||||
// Return Base implementation
|
||||
return Base;
|
||||
});
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
(function(){
|
||||
|
||||
var Chainable = function(){
|
||||
this._chain = [];
|
||||
this._cycle = this._cycle.bind(this);
|
||||
};
|
||||
|
||||
Chainable.prototype._running = false;
|
||||
|
||||
Chainable.prototype.start = function(){
|
||||
if (this._running || !this._chain.length) {
|
||||
return this;
|
||||
}
|
||||
this._running = true;
|
||||
return this._cycle();
|
||||
};
|
||||
|
||||
Chainable.prototype.reset = function(){
|
||||
if (!this._running) {
|
||||
return this;
|
||||
}
|
||||
clearTimeout(this._timer);
|
||||
this._timer = null;
|
||||
this._chain.length = 0;
|
||||
this._running = false;
|
||||
return this;
|
||||
};
|
||||
|
||||
Chainable.prototype._cycle = function(){
|
||||
var current;
|
||||
if (!this._chain.length) {
|
||||
return this.reset();
|
||||
}
|
||||
|
||||
current = this._chain.shift();
|
||||
|
||||
if (current.type === 'function') {
|
||||
current.func.apply(current.scope, current.args);
|
||||
current = null;
|
||||
return this._cycle();
|
||||
}
|
||||
if (current.type === 'wait') {
|
||||
clearTimeout(this._timer);
|
||||
this._timer = setTimeout(this._cycle, current.time || 0);
|
||||
current = null;
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
Chainable.prototype.then = Chainable.prototype.exec = function(func, scope, args){
|
||||
this._chain.push({
|
||||
type : 'function',
|
||||
|
||||
func : func,
|
||||
scope : scope || window,
|
||||
args : args || []
|
||||
});
|
||||
|
||||
return this.start();
|
||||
};
|
||||
|
||||
Chainable.prototype.wait = function(time){
|
||||
this._chain.push({
|
||||
type : 'wait',
|
||||
time : time
|
||||
});
|
||||
|
||||
return this.start();
|
||||
};
|
||||
|
||||
window.Chainable = Chainable;
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
if (!Function.prototype.bind) {
|
||||
Function.prototype.bind = function (oThis) {
|
||||
if (typeof this !== "function") {
|
||||
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
|
||||
}
|
||||
|
||||
var aArgs = Array.prototype.slice.call(arguments, 1),
|
||||
fToBind = this,
|
||||
fNOP = function () {},
|
||||
fBound = function () {
|
||||
return fToBind.apply(this instanceof fNOP && oThis ?
|
||||
this : oThis,
|
||||
aArgs.concat(Array.prototype.slice.call(arguments)));
|
||||
};
|
||||
|
||||
fNOP.prototype = this.prototype;
|
||||
fBound.prototype = new fNOP();
|
||||
|
||||
return fBound;
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
(function(String){
|
||||
|
||||
if (String.prototype.substitute) {
|
||||
return;
|
||||
}
|
||||
|
||||
String.prototype.substitute = function(object, regexp){
|
||||
return String(this).replace(regexp || (/\\?\{([^{}]+)\}/g), function(match, name){
|
||||
if (match.charAt(0) == '\\') return match.slice(1);
|
||||
return (object[name] !== null) ? object[name] : '';
|
||||
});
|
||||
};
|
||||
|
||||
})(String);
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
(function(global){ 'use strict';
|
||||
|
||||
var Vector = function(x, y){
|
||||
this.x = x || 0;
|
||||
this.y = y || 0;
|
||||
};
|
||||
|
||||
Vector.prototype = {
|
||||
|
||||
clone: function(){
|
||||
return new Vector(this.x, this.y);
|
||||
},
|
||||
|
||||
add: function(vec){
|
||||
this.x += vec.x;
|
||||
this.y += vec.y;
|
||||
return this;
|
||||
},
|
||||
|
||||
sub: function(vec){
|
||||
this.x -= vec.x;
|
||||
this.y -= vec.y;
|
||||
return this;
|
||||
},
|
||||
|
||||
subVal: function(val){
|
||||
this.x -= val;
|
||||
this.y -= val;
|
||||
return this;
|
||||
},
|
||||
|
||||
mult: function(mul){
|
||||
this.x *= mul;
|
||||
this.y *= mul;
|
||||
return this;
|
||||
},
|
||||
|
||||
div: function(div){
|
||||
if (div === 0) {
|
||||
return this;
|
||||
}
|
||||
this.x /= div;
|
||||
this.y /= div;
|
||||
return this;
|
||||
},
|
||||
|
||||
mag: function(){
|
||||
return Math.sqrt(
|
||||
this.x * this.x +
|
||||
this.y * this.y
|
||||
);
|
||||
},
|
||||
|
||||
limit: function(max){
|
||||
if (this.mag() > max) {
|
||||
this.normalize();
|
||||
this.mult(max);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
normalize: function(){
|
||||
var mag = this.mag();
|
||||
if (mag === 0) {
|
||||
return this;
|
||||
}
|
||||
this.div(mag);
|
||||
return this;
|
||||
},
|
||||
|
||||
heading: function(){
|
||||
return Math.atan2(this.y, this.x);
|
||||
},
|
||||
|
||||
set: function(vec){
|
||||
this.x = vec.x;
|
||||
this.y = vec.y;
|
||||
return this;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Vector.add = function(vec1, vec2){
|
||||
return vec1.clone().add(vec2.clone());
|
||||
};
|
||||
|
||||
Vector.sub = function(vec1, vec2){
|
||||
return vec1.clone().sub(vec2.clone());
|
||||
};
|
||||
|
||||
Vector.mult = function(vec, mult){
|
||||
return vec.clone().mult(mult);
|
||||
};
|
||||
|
||||
Vector.div = function(vec, div){
|
||||
return vec.clone().div(div);
|
||||
};
|
||||
|
||||
// Ripped from processing
|
||||
Vector.random2D = function(){
|
||||
var angle = Math.random(0, 1) * Math.PI * 2;
|
||||
return new Vector(Math.cos(angle), Math.sin(angle));
|
||||
};
|
||||
|
||||
Vector.coerce = function(obj){
|
||||
return new Vector(obj.x, obj.y);
|
||||
};
|
||||
|
||||
global.Vector = Vector;
|
||||
|
||||
})(this);
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
*
|
||||
* name: dbg
|
||||
*
|
||||
* description: A bad ass little console utility, check the README for deets
|
||||
*
|
||||
* license: MIT-style license
|
||||
*
|
||||
* author: Amadeus Demarzi
|
||||
*
|
||||
* provides: window.dbg
|
||||
*
|
||||
*/
|
||||
|
||||
(function(){
|
||||
|
||||
var global = this,
|
||||
|
||||
// Get the real console or set to null for easy boolean checks
|
||||
realConsole = global.console || null,
|
||||
|
||||
// Backup / Disabled Lambda
|
||||
fn = function(){},
|
||||
|
||||
// Supported console methods
|
||||
methodNames = ['log', 'error', 'warn', 'info', 'count', 'debug', 'profileEnd', 'trace', 'dir', 'dirxml', 'assert', 'time', 'profile', 'timeEnd', 'group', 'groupEnd'],
|
||||
|
||||
// Disabled Console
|
||||
disabledConsole = {
|
||||
|
||||
// Enables dbg, if it exists, otherwise it just provides disabled
|
||||
enable: function(quiet){
|
||||
global.dbg = realConsole ? realConsole : disabledConsole;
|
||||
},
|
||||
|
||||
// Disable dbg
|
||||
disable: function(){
|
||||
global.dbg = disabledConsole;
|
||||
}
|
||||
|
||||
}, name, i;
|
||||
|
||||
// Setup disabled console and provide fallbacks on the real console
|
||||
for (i = 0; i < methodNames.length;i++){
|
||||
name = methodNames[i];
|
||||
disabledConsole[name] = fn;
|
||||
if (realConsole && !realConsole[name])
|
||||
realConsole[name] = fn;
|
||||
}
|
||||
|
||||
// Add enable/disable methods
|
||||
if (realConsole) {
|
||||
realConsole.disable = disabledConsole.disable;
|
||||
realConsole.enable = disabledConsole.enable;
|
||||
}
|
||||
|
||||
// Enable dbg
|
||||
disabledConsole.enable();
|
||||
|
||||
}).call(this);
|
||||
|
|
@ -19,14 +19,29 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/javascripts/lib/jquery-2.0.3.min.js"></script>
|
||||
<script src="/javascripts/lib/bootstrap.min.js"></script>
|
||||
<script src="/javascripts/app/deploy/site.js"></script>
|
||||
|
||||
<script>
|
||||
APP.initialize();
|
||||
</script>
|
||||
<script type="text/javascript" src="/javascripts/lib/jquery-2.0.3.min.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/lib/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/lib/dbg.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/lib/Function.prototype.bind.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/lib/Base.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/lib/String.substitute.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/lib/Vector.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/lib/Chainable.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Logo.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Grid.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Engine.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Engine.Particle.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Engine.Particle.Fixed.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Engine.Point.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Engine.Point.Puller.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Engine.Polygon.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Engine.Polygon.Puller.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Engine.Shape.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Engine.Shape.Puller.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Engine.Typewriter.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/app/Init.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
</script>
|
||||
</head>
|
||||
<body class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
|
||||
<body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
|
||||
<div id="header" class="<%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
|
||||
<div class="container">
|
||||
<div class="col-sm-12 col-md-4 nav-logo">
|
||||
|
|
|
|||
|
|
@ -56,6 +56,13 @@ body.page-sub{
|
|||
margin-bottom: 0;
|
||||
|
||||
&.navbar-static-top{
|
||||
height:70px;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0);
|
||||
-moz-transform:translate3d(0,0,0);
|
||||
-ms-transform:translate3d(0,0,0);
|
||||
-o-transform:translate3d(0,0,0);
|
||||
transform:translate3d(0,0,0);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
|
@ -341,6 +348,14 @@ body.page-sub{
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 763px) {
|
||||
.navbar-static-top {
|
||||
.nav-white {
|
||||
background-color:rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
|
||||
#header{
|
||||
|
|
@ -353,6 +368,7 @@ body.page-sub{
|
|||
.img-retina("../images/header-logo.png", "../images/header-logo@2x.png", 39px, 44px);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#feature-auto{
|
||||
|
|
|
|||
|
|
@ -350,6 +350,7 @@
|
|||
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
|
||||
color: @white;
|
||||
background-color: transparent;
|
||||
overflow:auto;
|
||||
|
||||
.txt-r {
|
||||
color: lighten(@red, 8%);;
|
||||
|
|
|
|||
|
|
@ -3,75 +3,439 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
#jumbotron-mask{
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: @jumbotron-total-height;
|
||||
position:relative;
|
||||
z-index:0;
|
||||
height:700px;
|
||||
margin-top: @negative-hero-margin;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#jumbotron {
|
||||
position: relative;
|
||||
height: @jumbotron-total-height;
|
||||
height:700px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-top: @negative-hero-margin;
|
||||
color: @jumbotron-color;
|
||||
background: transparent url('../images/hero-bg.png') center center no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
&.mobile-hero{
|
||||
background: transparent url( ../images/node-hero-pattern.jpg ) center center;
|
||||
background-size: 320px 320px;
|
||||
background: -webkit-image-set( url('../images/node-hero-pattern.jpg') 1x, url('../images/node-hero-pattern@2x.jpg') 2x );
|
||||
&.static {
|
||||
background-image:url(../images/bg-galaxy.jpg);
|
||||
background-position:50% 50%;
|
||||
background-repeat:no-repeat;
|
||||
|
||||
.jumbotron-content {
|
||||
background-image:url(../images/bg-static.png);
|
||||
background-size:cover;
|
||||
background-position:50% 50%;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
|
||||
.jumbotron-content:after {
|
||||
content:'';
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
background:url(../images/logo-static.png);
|
||||
|
||||
-webkit-background-size:100% 100%;
|
||||
-moz-background-size:100% 100%;
|
||||
-ms-background-size:100% 100%;
|
||||
-o-background-size:100% 100%;
|
||||
background-size:100% 100%;
|
||||
|
||||
width:360px;
|
||||
height:360px;
|
||||
margin:-204px 0 0 -180px;
|
||||
}
|
||||
}
|
||||
|
||||
.terraform-canvas {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
opacity:0;
|
||||
|
||||
.container{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
margin-top: @header-height;
|
||||
-webkit-transition:opacity 2s ease-out;
|
||||
-moz-transition:opacity 2s ease-out;
|
||||
-ms-transition:opacity 2s ease-out;
|
||||
-o-transition:opacity 2s ease-out;
|
||||
transition:opacity 2s ease-out;
|
||||
|
||||
> div{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jumbo-logo-wrap{
|
||||
margin-top: 135px;
|
||||
|
||||
.jumbo-logo{
|
||||
width: 318px;
|
||||
height: 316px;
|
||||
background: transparent url( ../images/consul-hero-logo@2x.png ) 0 0 no-repeat;
|
||||
background-size: 318px 316px;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
h2{
|
||||
margin-top: 175px;
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
letter-spacing: 1px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
-webkit-transform:translate3d(0,0,0);
|
||||
-moz-transform:translate3d(0,0,0);
|
||||
-ms-transform:translate3d(0,0,0);
|
||||
-o-transform:translate3d(0,0,0);
|
||||
transform:translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#jumbotron .container {
|
||||
h2{
|
||||
text-align: center;
|
||||
margin-left: 0;
|
||||
.jumbotron-content {
|
||||
position:absolute;
|
||||
z-index:999;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0);
|
||||
-moz-transform:translate3d(0,0,0);
|
||||
-ms-transform:translate3d(0,0,0);
|
||||
-o-transform:translate3d(0,0,0);
|
||||
transform:translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.galaxy-bg {
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height:100%;
|
||||
top:0;
|
||||
left:0;
|
||||
|
||||
background-image:url(../images/bg-galaxy.jpg);
|
||||
/* background-size:cover; */
|
||||
background-position:50% 50%;
|
||||
opacity:0;
|
||||
|
||||
-webkit-transition:opacity 2s ease-out;
|
||||
-moz-transition:opacity 2s ease-out;
|
||||
-ms-transition:opacity 2s ease-out;
|
||||
-o-transition:opacity 2s ease-out;
|
||||
transition:opacity 2s ease-out;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0);
|
||||
-moz-transform:translate3d(0,0,0);
|
||||
-ms-transform:translate3d(0,0,0);
|
||||
-o-transform:translate3d(0,0,0);
|
||||
transform:translate3d(0,0,0);
|
||||
|
||||
&.show {
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#jumbotron .container {
|
||||
h2{
|
||||
margin-top: 130px;
|
||||
font-size: 32px;
|
||||
}
|
||||
.tag-line {
|
||||
position:absolute;
|
||||
width:100%;
|
||||
top:540px;
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
|
||||
font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 200;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0);
|
||||
-moz-transform:translate3d(0,0,0);
|
||||
-ms-transform:translate3d(0,0,0);
|
||||
-o-transform:translate3d(0,0,0);
|
||||
transform:translate3d(0,0,0);
|
||||
}
|
||||
|
||||
|
||||
.animated-logo {
|
||||
position:absolute;
|
||||
z-index:200;
|
||||
top:50%;
|
||||
left:50%;
|
||||
width:140px;
|
||||
height:140px;
|
||||
margin:-60px 0 0 -115px;
|
||||
opacity:1;
|
||||
|
||||
-webkit-transition:-webkit-transform 300ms ease-in-out;
|
||||
-moz-transition: -moz-transform 300ms ease-in-out;
|
||||
-ms-transition: -ms-transform 300ms ease-in-out;
|
||||
-o-transition: -o-transform 300ms ease-in-out;
|
||||
transition: transform 300ms ease-in-out;
|
||||
|
||||
-webkit-transform-origin:50% 50%;
|
||||
-moz-transform-origin:50% 50%;
|
||||
-ms-transform-origin:50% 50%;
|
||||
-o-transform-origin:50% 50%;
|
||||
transform-origin:50% 50%;
|
||||
|
||||
-webkit-transform-style:preserve-3d;
|
||||
-moz-transform-style:preserve-3d;
|
||||
-ms-transform-style:preserve-3d;
|
||||
-o-transform-style:preserve-3d;
|
||||
transform-style:preserve-3d;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
|
||||
-moz-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
|
||||
-ms-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
|
||||
-o-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
|
||||
transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
|
||||
}
|
||||
|
||||
.state-one .animated-logo {
|
||||
-webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
|
||||
-moz-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
|
||||
-ms-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
|
||||
-o-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
|
||||
transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
|
||||
}
|
||||
|
||||
.state-one.state-two.state-three.state-four .animated-logo {
|
||||
-webkit-transform-origin:100% 0;
|
||||
-moz-transform-origin:100% 0;
|
||||
-ms-transform-origin:100% 0;
|
||||
-o-transform-origin:100% 0;
|
||||
transform-origin:100% 0;
|
||||
|
||||
-webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
|
||||
-moz-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
|
||||
-ms-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
|
||||
-o-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
|
||||
transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
|
||||
}
|
||||
|
||||
.state-one.state-two.state-three.state-four .white-block {
|
||||
background-color:rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.white-block {
|
||||
position:absolute;
|
||||
width:68px;
|
||||
height:68px;
|
||||
|
||||
-webkit-box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
box-sizing:border-box;
|
||||
|
||||
/* background-color:rgba(255,0,0,0.3); */
|
||||
background-color:#fff;
|
||||
background-color:rgba(255,255,255,0);
|
||||
|
||||
border:1px solid #fff;
|
||||
|
||||
-webkit-transition:
|
||||
opacity 300ms ease-out,
|
||||
-webkit-transform 300ms ease-out,
|
||||
background-color 300ms ease-out;
|
||||
-moz-transition:
|
||||
opacity 300ms ease-out,
|
||||
-moz-transform 300ms ease-out,
|
||||
background-color 300ms ease-out;
|
||||
-ms-transition:
|
||||
opacity 300ms ease-out,
|
||||
-ms-transform 300ms ease-out,
|
||||
background-color 300ms ease-out;
|
||||
-o-transition:
|
||||
opacity 300ms ease-out,
|
||||
-o-transform 300ms ease-out,
|
||||
background-color 300ms ease-out;
|
||||
transition:
|
||||
opacity 300ms ease-out,
|
||||
transform 300ms ease-out,
|
||||
background-color 300ms ease-out;
|
||||
}
|
||||
|
||||
.block-1,
|
||||
.block-2,
|
||||
.block-3,
|
||||
.block-4 {
|
||||
top:0;
|
||||
left:72px;
|
||||
|
||||
-webkit-transform-origin:50% 50%;
|
||||
-moz-transform-origin:50% 50%;
|
||||
-ms-transform-origin:50% 50%;
|
||||
-o-transform-origin:50% 50%;
|
||||
transform-origin:50% 50%;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0);
|
||||
-moz-transform:translate3d(0,0,0);
|
||||
-ms-transform:translate3d(0,0,0);
|
||||
-o-transform:translate3d(0,0,0);
|
||||
transform:translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.block-1 {
|
||||
opacity:0;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0) scale(0,0);
|
||||
-moz-transform:translate3d(0,0,0) scale(0,0);
|
||||
-ms-transform:translate3d(0,0,0) scale(0,0);
|
||||
-o-transform:translate3d(0,0,0) scale(0,0);
|
||||
transform:translate3d(0,0,0) scale(0,0);
|
||||
}
|
||||
|
||||
.block-2 {
|
||||
opacity:0;
|
||||
top:0;
|
||||
left:0;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0) scale(0,0);
|
||||
-moz-transform:translate3d(0,0,0) scale(0,0);
|
||||
-ms-transform:translate3d(0,0,0) scale(0,0);
|
||||
-o-transform:translate3d(0,0,0) scale(0,0);
|
||||
transform:translate3d(0,0,0) scale(0,0);
|
||||
}
|
||||
|
||||
.block-3 {
|
||||
opacity:0;
|
||||
top:72px;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0) scale(0,0);
|
||||
-moz-transform:translate3d(0,0,0) scale(0,0);
|
||||
-ms-transform:translate3d(0,0,0) scale(0,0);
|
||||
-o-transform:translate3d(0,0,0) scale(0,0);
|
||||
transform:translate3d(0,0,0) scale(0,0);
|
||||
}
|
||||
|
||||
.block-4 {
|
||||
-webkit-transform-origin:0 0;
|
||||
-moz-transform-origin:0 0;
|
||||
-ms-transform-origin:0 0;
|
||||
-o-transform-origin:0 0;
|
||||
transform-origin:0 0;
|
||||
|
||||
-webkit-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
|
||||
-moz-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
|
||||
-ms-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
|
||||
-o-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
|
||||
transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
|
||||
}
|
||||
|
||||
.state-one.state-two .block-1 {
|
||||
opacity:1;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0) scale(1,1);
|
||||
-moz-transform:translate3d(0,0,0) scale(1,1);
|
||||
-ms-transform:translate3d(0,0,0) scale(1,1);
|
||||
-o-transform:translate3d(0,0,0) scale(1,1);
|
||||
transform:translate3d(0,0,0) scale(1,1);
|
||||
}
|
||||
|
||||
.state-one .block-2 {
|
||||
opacity:1;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0) scale(1,1);
|
||||
-moz-transform:translate3d(0,0,0) scale(1,1);
|
||||
-ms-transform:translate3d(0,0,0) scale(1,1);
|
||||
-o-transform:translate3d(0,0,0) scale(1,1);
|
||||
transform:translate3d(0,0,0) scale(1,1);
|
||||
}
|
||||
|
||||
.state-one.state-two.state-three .block-3 {
|
||||
opacity:1;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0) scale(1,1);
|
||||
-moz-transform:translate3d(0,0,0) scale(1,1);
|
||||
-ms-transform:translate3d(0,0,0) scale(1,1);
|
||||
-o-transform:translate3d(0,0,0) scale(1,1);
|
||||
transform:translate3d(0,0,0) scale(1,1);
|
||||
}
|
||||
|
||||
.cursor {
|
||||
font-weight:bold;
|
||||
|
||||
-webkit-animation:Blink 800ms infinite;
|
||||
-moz-animation:Blink 800ms infinite;
|
||||
-ms-animation:Blink 800ms infinite;
|
||||
-o-animation:Blink 800ms infinite;
|
||||
animation:Blink 800ms infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes Blink {
|
||||
0% {
|
||||
opacity:1;
|
||||
}
|
||||
50% {
|
||||
opacity:1;
|
||||
|
||||
}
|
||||
51% {
|
||||
opacity:0;
|
||||
}
|
||||
100% {
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes Blink {
|
||||
0% {
|
||||
opacity:1;
|
||||
}
|
||||
50% {
|
||||
opacity:1;
|
||||
}
|
||||
51% {
|
||||
opacity:0;
|
||||
}
|
||||
100% {
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes Blink {
|
||||
0% {
|
||||
opacity:1;
|
||||
|
||||
}
|
||||
50% {
|
||||
opacity:1;
|
||||
}
|
||||
51% {
|
||||
opacity:0;
|
||||
}
|
||||
100% {
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes Blink {
|
||||
0% {
|
||||
opacity:1;
|
||||
|
||||
}
|
||||
50% {
|
||||
opacity:1;
|
||||
}
|
||||
51% {
|
||||
opacity:0;
|
||||
}
|
||||
100% {
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes Blink {
|
||||
0% {
|
||||
opacity:1;
|
||||
|
||||
}
|
||||
50% {
|
||||
opacity:1;
|
||||
}
|
||||
51% {
|
||||
opacity:0;
|
||||
}
|
||||
100% {
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 570px) {
|
||||
.tag-line {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#jumbotron .jumbotron-content {
|
||||
-webkit-transform:translate3d(0, 0, 0) scale(0.8);
|
||||
-moz-transform:translate3d(0, 0, 0) scale(0.8);
|
||||
-ms-transform:translate3d(0, 0, 0) scale(0.8);
|
||||
-o-transform:translate3d(0, 0, 0) scale(0.8);
|
||||
transform:translate3d(0, 0, 0) scale(0.8);
|
||||
}
|
||||
|
||||
.animated-logo {
|
||||
margin:-15px 0 0 -113px;
|
||||
}
|
||||
|
||||
#jumbotron-mask,
|
||||
#jumbotron {
|
||||
height:560px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,10 @@
|
|||
|
||||
@jumbotron-height: 804px;
|
||||
@header-height: 90px;
|
||||
@jumbotron-total-height: 804px; //jumbo+header
|
||||
@jumbotron-color: #fff;
|
||||
@btn-border-radius: 4px;
|
||||
@el-border-radius: 6px;
|
||||
@negative-hero-margin: -90px;
|
||||
@negative-hero-margin: -70px;
|
||||
// colors
|
||||
// -------------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -126,6 +126,12 @@ body.page-sub #header .main-links.nav > li > a:focus {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
#header.navbar-static-top {
|
||||
height: 70px;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
z-index: 1000;
|
||||
}
|
||||
#header a {
|
||||
|
|
@ -361,6 +367,11 @@ body.page-sub #header .main-links.nav > li > a:focus {
|
|||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 763px) {
|
||||
.navbar-static-top .nav-white {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
@media (max-width: 320px) {
|
||||
#header .navbar-brand.logo {
|
||||
padding: 0 0 0 54px !important;
|
||||
|
|
@ -574,62 +585,359 @@ body.page-home #footer {
|
|||
}
|
||||
}
|
||||
#jumbotron-mask {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 804px;
|
||||
margin-top: -90px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
height: 700px;
|
||||
margin-top: -70px;
|
||||
background-color: black;
|
||||
}
|
||||
#jumbotron {
|
||||
position: relative;
|
||||
height: 804px;
|
||||
height: 700px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-top: -90px;
|
||||
color: #ffffff;
|
||||
background: transparent url('../images/hero-bg.png') center center no-repeat;
|
||||
}
|
||||
#jumbotron.static {
|
||||
background-image: url(../images/bg-galaxy.jpg);
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#jumbotron.static .jumbotron-content {
|
||||
background-image: url(../images/bg-static.png);
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#jumbotron.mobile-hero {
|
||||
background: transparent url(../images/node-hero-pattern.jpg ) center center;
|
||||
background-size: 320px 320px;
|
||||
background: -webkit-image-set(url('../images/node-hero-pattern.jpg') 1x, url('../images/node-hero-pattern@2x.jpg') 2x);
|
||||
#jumbotron.static .jumbotron-content:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: url(../images/logo-static.png);
|
||||
-webkit-background-size: 100% 100%;
|
||||
-moz-background-size: 100% 100%;
|
||||
-ms-background-size: 100% 100%;
|
||||
-o-background-size: 100% 100%;
|
||||
background-size: 100% 100%;
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
margin: -204px 0 0 -180px;
|
||||
}
|
||||
#jumbotron .container {
|
||||
position: relative;
|
||||
#jumbotron .terraform-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 90px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 2s ease-out;
|
||||
-moz-transition: opacity 2s ease-out;
|
||||
-ms-transition: opacity 2s ease-out;
|
||||
-o-transition: opacity 2s ease-out;
|
||||
transition: opacity 2s ease-out;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
#jumbotron .container > div {
|
||||
display: none;
|
||||
#jumbotron .jumbotron-content {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
#jumbotron .container .jumbo-logo-wrap {
|
||||
margin-top: 135px;
|
||||
#jumbotron .galaxy-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-image: url(../images/bg-galaxy.jpg);
|
||||
/* background-size:cover; */
|
||||
background-position: 50% 50%;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 2s ease-out;
|
||||
-moz-transition: opacity 2s ease-out;
|
||||
-ms-transition: opacity 2s ease-out;
|
||||
-o-transition: opacity 2s ease-out;
|
||||
transition: opacity 2s ease-out;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
#jumbotron .container .jumbo-logo-wrap .jumbo-logo {
|
||||
width: 318px;
|
||||
height: 316px;
|
||||
background: transparent url(../images/consul-hero-logo@2x.png ) 0 0 no-repeat;
|
||||
background-size: 318px 316px;
|
||||
z-index: 20;
|
||||
#jumbotron .galaxy-bg.show {
|
||||
opacity: 1;
|
||||
}
|
||||
#jumbotron .container h2 {
|
||||
margin-top: 175px;
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
letter-spacing: 1px;
|
||||
margin-left: 40px;
|
||||
.tag-line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 540px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 200;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
#jumbotron .container h2 {
|
||||
text-align: center;
|
||||
margin-left: 0;
|
||||
.animated-logo {
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: -60px 0 0 -115px;
|
||||
opacity: 1;
|
||||
-webkit-transition: -webkit-transform 300ms ease-in-out;
|
||||
-moz-transition: -moz-transform 300ms ease-in-out;
|
||||
-ms-transition: -ms-transform 300ms ease-in-out;
|
||||
-o-transition: -o-transform 300ms ease-in-out;
|
||||
transition: transform 300ms ease-in-out;
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
-o-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-ms-transform-style: preserve-3d;
|
||||
-o-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
|
||||
-moz-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
|
||||
-ms-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
|
||||
-o-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
|
||||
transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
|
||||
}
|
||||
.state-one .animated-logo {
|
||||
-webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
|
||||
-moz-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
|
||||
-ms-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
|
||||
-o-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
|
||||
transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
|
||||
}
|
||||
.state-one.state-two.state-three.state-four .animated-logo {
|
||||
-webkit-transform-origin: 100% 0;
|
||||
-moz-transform-origin: 100% 0;
|
||||
-ms-transform-origin: 100% 0;
|
||||
-o-transform-origin: 100% 0;
|
||||
transform-origin: 100% 0;
|
||||
-webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1);
|
||||
-moz-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1);
|
||||
-ms-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1);
|
||||
-o-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1);
|
||||
transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1);
|
||||
}
|
||||
.state-one.state-two.state-three.state-four .white-block {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.white-block {
|
||||
position: absolute;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
/* background-color:rgba(255,0,0,0.3); */
|
||||
background-color: #fff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border: 1px solid #fff;
|
||||
-webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out, background-color 300ms ease-out;
|
||||
-moz-transition: opacity 300ms ease-out, -moz-transform 300ms ease-out, background-color 300ms ease-out;
|
||||
-ms-transition: opacity 300ms ease-out, -ms-transform 300ms ease-out, background-color 300ms ease-out;
|
||||
-o-transition: opacity 300ms ease-out, -o-transform 300ms ease-out, background-color 300ms ease-out;
|
||||
transition: opacity 300ms ease-out, transform 300ms ease-out, background-color 300ms ease-out;
|
||||
}
|
||||
.block-1,
|
||||
.block-2,
|
||||
.block-3,
|
||||
.block-4 {
|
||||
top: 0;
|
||||
left: 72px;
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
-o-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.block-1 {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
-o-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
}
|
||||
.block-2 {
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
-o-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
}
|
||||
.block-3 {
|
||||
opacity: 0;
|
||||
top: 72px;
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
-o-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
transform: translate3d(0, 0, 0) scale(0, 0);
|
||||
}
|
||||
.block-4 {
|
||||
-webkit-transform-origin: 0 0;
|
||||
-moz-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
-o-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
|
||||
-moz-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
|
||||
-ms-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
|
||||
-o-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
|
||||
transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
|
||||
}
|
||||
.state-one.state-two .block-1 {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
-moz-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
-ms-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
-o-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
}
|
||||
.state-one .block-2 {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
-moz-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
-ms-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
-o-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
}
|
||||
.state-one.state-two.state-three .block-3 {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
-moz-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
-ms-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
-o-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
}
|
||||
.cursor {
|
||||
font-weight: bold;
|
||||
-webkit-animation: Blink 800ms infinite;
|
||||
-moz-animation: Blink 800ms infinite;
|
||||
-ms-animation: Blink 800ms infinite;
|
||||
-o-animation: Blink 800ms infinite;
|
||||
animation: Blink 800ms infinite;
|
||||
}
|
||||
@-webkit-keyframes Blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
#jumbotron .container h2 {
|
||||
margin-top: 130px;
|
||||
font-size: 32px;
|
||||
@-moz-keyframes Blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes Blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-o-keyframes Blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes Blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 570px) {
|
||||
.tag-line {
|
||||
display: none;
|
||||
}
|
||||
#jumbotron .jumbotron-content {
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(0.8);
|
||||
-moz-transform: translate3d(0, 0, 0) scale(0.8);
|
||||
-ms-transform: translate3d(0, 0, 0) scale(0.8);
|
||||
-o-transform: translate3d(0, 0, 0) scale(0.8);
|
||||
transform: translate3d(0, 0, 0) scale(0.8);
|
||||
}
|
||||
.animated-logo {
|
||||
margin: -15px 0 0 -113px;
|
||||
}
|
||||
#jumbotron-mask,
|
||||
#jumbotron {
|
||||
height: 560px;
|
||||
}
|
||||
}
|
||||
.outline-btn {
|
||||
|
|
@ -1025,6 +1333,7 @@ body.page-home #footer {
|
|||
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
overflow: auto;
|
||||
}
|
||||
#demos .terminals .terminal-item .terminal .terminal-window .txt-r {
|
||||
color: #e47078;
|
||||
|
|
|
|||
Loading…
Reference in New Issue