Jack Pearkes
commit
3a875a023e
|
|
@ -1,69 +1,67 @@
|
||||||
|
// jshint node:true
|
||||||
module.exports = function(grunt) {
|
module.exports = function(grunt) {
|
||||||
|
|
||||||
// Configuration goes here
|
// Load plugins here
|
||||||
grunt.initConfig({
|
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: {
|
// Configuration goes here
|
||||||
development:{
|
grunt.initConfig({
|
||||||
files: {
|
|
||||||
"stylesheets/main.css": "stylesheets/main.less"
|
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
|
uglify: {
|
||||||
grunt.loadNpmTasks('grunt-contrib-less');
|
app: {
|
||||||
grunt.loadNpmTasks('grunt-contrib-clean');
|
files: {
|
||||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
'javascripts/app/deploy/site.min.js': ['javascripts/app/deploy/site.js']
|
||||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
}
|
||||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
}
|
||||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
},
|
||||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
|
||||||
grunt.loadNpmTasks('grunt-recess');
|
|
||||||
|
|
||||||
// JS distribution task.
|
watch: {
|
||||||
grunt.registerTask('dist-js', ['concat', 'uglify']);
|
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 -->
|
<!-- Main jumbotron for a primary marketing message or call to action -->
|
||||||
<div id="jumbotron-mask">
|
<div id="jumbotron-mask">
|
||||||
<div id="jumbotron">
|
<div id="jumbotron">
|
||||||
<div class="container">
|
<div class="jumbotron-content" id="jumbotron-content">
|
||||||
<div class="col-lg-6 col-md-6">
|
<h2 class="tag-line" id="tag-line">Build, Combine, and Launch Infrastucture</h2>
|
||||||
<h2 class="rls-l">
|
</div>
|
||||||
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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="/javascripts/lib/jquery-2.0.3.min.js"></script>
|
<script type="text/javascript" src="/javascripts/lib/jquery-2.0.3.min.js"></script>
|
||||||
<script src="/javascripts/lib/bootstrap.min.js"></script>
|
<script type="text/javascript" src="/javascripts/lib/bootstrap.min.js"></script>
|
||||||
<script src="/javascripts/app/deploy/site.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>
|
<script type="text/javascript" src="/javascripts/lib/Base.js"></script>
|
||||||
APP.initialize();
|
<script type="text/javascript" src="/javascripts/lib/String.substitute.js"></script>
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</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 id="header" class="<%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="col-sm-12 col-md-4 nav-logo">
|
<div class="col-sm-12 col-md-4 nav-logo">
|
||||||
|
|
|
||||||
|
|
@ -56,6 +56,13 @@ body.page-sub{
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
&.navbar-static-top{
|
&.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;
|
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) {
|
@media (max-width: 320px) {
|
||||||
|
|
||||||
#header{
|
#header{
|
||||||
|
|
@ -353,6 +368,7 @@ body.page-sub{
|
||||||
.img-retina("../images/header-logo.png", "../images/header-logo@2x.png", 39px, 44px);
|
.img-retina("../images/header-logo.png", "../images/header-logo@2x.png", 39px, 44px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#feature-auto{
|
#feature-auto{
|
||||||
|
|
|
||||||
|
|
@ -350,6 +350,7 @@
|
||||||
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
|
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
|
||||||
color: @white;
|
color: @white;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
overflow:auto;
|
||||||
|
|
||||||
.txt-r {
|
.txt-r {
|
||||||
color: lighten(@red, 8%);;
|
color: lighten(@red, 8%);;
|
||||||
|
|
|
||||||
|
|
@ -3,75 +3,439 @@
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
#jumbotron-mask{
|
#jumbotron-mask{
|
||||||
overflow: hidden;
|
position:relative;
|
||||||
width: 100%;
|
z-index:0;
|
||||||
height: @jumbotron-total-height;
|
height:700px;
|
||||||
margin-top: @negative-hero-margin;
|
margin-top: @negative-hero-margin;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
#jumbotron {
|
#jumbotron {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: @jumbotron-total-height;
|
height:700px;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
margin-top: @negative-hero-margin;
|
|
||||||
color: @jumbotron-color;
|
color: @jumbotron-color;
|
||||||
background: transparent url('../images/hero-bg.png') center center no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
|
|
||||||
&.mobile-hero{
|
&.static {
|
||||||
background: transparent url( ../images/node-hero-pattern.jpg ) center center;
|
background-image:url(../images/bg-galaxy.jpg);
|
||||||
background-size: 320px 320px;
|
background-position:50% 50%;
|
||||||
background: -webkit-image-set( url('../images/node-hero-pattern.jpg') 1x, url('../images/node-hero-pattern@2x.jpg') 2x );
|
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{
|
-webkit-transition:opacity 2s ease-out;
|
||||||
position: relative;
|
-moz-transition:opacity 2s ease-out;
|
||||||
height: 100%;
|
-ms-transition:opacity 2s ease-out;
|
||||||
margin-top: @header-height;
|
-o-transition:opacity 2s ease-out;
|
||||||
|
transition:opacity 2s ease-out;
|
||||||
|
|
||||||
> div{
|
-webkit-transform:translate3d(0,0,0);
|
||||||
display: none;
|
-moz-transform:translate3d(0,0,0);
|
||||||
}
|
-ms-transform:translate3d(0,0,0);
|
||||||
|
-o-transform:translate3d(0,0,0);
|
||||||
.jumbo-logo-wrap{
|
transform:translate3d(0,0,0);
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
.jumbotron-content {
|
||||||
#jumbotron .container {
|
position:absolute;
|
||||||
h2{
|
z-index:999;
|
||||||
text-align: center;
|
top:0;
|
||||||
margin-left: 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) {
|
.tag-line {
|
||||||
#jumbotron .container {
|
position:absolute;
|
||||||
h2{
|
width:100%;
|
||||||
margin-top: 130px;
|
top:540px;
|
||||||
font-size: 32px;
|
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;
|
@jumbotron-height: 804px;
|
||||||
@header-height: 90px;
|
@header-height: 90px;
|
||||||
@jumbotron-total-height: 804px; //jumbo+header
|
|
||||||
@jumbotron-color: #fff;
|
@jumbotron-color: #fff;
|
||||||
@btn-border-radius: 4px;
|
@btn-border-radius: 4px;
|
||||||
@el-border-radius: 6px;
|
@el-border-radius: 6px;
|
||||||
@negative-hero-margin: -90px;
|
@negative-hero-margin: -70px;
|
||||||
// colors
|
// colors
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -126,6 +126,12 @@ body.page-sub #header .main-links.nav > li > a:focus {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
#header.navbar-static-top {
|
#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;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
#header a {
|
#header a {
|
||||||
|
|
@ -361,6 +367,11 @@ body.page-sub #header .main-links.nav > li > a:focus {
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 763px) {
|
||||||
|
.navbar-static-top .nav-white {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
@media (max-width: 320px) {
|
@media (max-width: 320px) {
|
||||||
#header .navbar-brand.logo {
|
#header .navbar-brand.logo {
|
||||||
padding: 0 0 0 54px !important;
|
padding: 0 0 0 54px !important;
|
||||||
|
|
@ -574,62 +585,359 @@ body.page-home #footer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#jumbotron-mask {
|
#jumbotron-mask {
|
||||||
overflow: hidden;
|
position: relative;
|
||||||
width: 100%;
|
z-index: 0;
|
||||||
height: 804px;
|
height: 700px;
|
||||||
margin-top: -90px;
|
margin-top: -70px;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
#jumbotron {
|
#jumbotron {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 804px;
|
height: 700px;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
margin-top: -90px;
|
|
||||||
color: #ffffff;
|
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-size: cover;
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
#jumbotron.mobile-hero {
|
#jumbotron.static .jumbotron-content:after {
|
||||||
background: transparent url(../images/node-hero-pattern.jpg ) center center;
|
content: '';
|
||||||
background-size: 320px 320px;
|
display: block;
|
||||||
background: -webkit-image-set(url('../images/node-hero-pattern.jpg') 1x, url('../images/node-hero-pattern@2x.jpg') 2x);
|
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 {
|
#jumbotron .terraform-canvas {
|
||||||
position: relative;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
height: 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 {
|
#jumbotron .jumbotron-content {
|
||||||
display: none;
|
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 {
|
#jumbotron .galaxy-bg {
|
||||||
margin-top: 135px;
|
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 {
|
#jumbotron .galaxy-bg.show {
|
||||||
width: 318px;
|
opacity: 1;
|
||||||
height: 316px;
|
|
||||||
background: transparent url(../images/consul-hero-logo@2x.png ) 0 0 no-repeat;
|
|
||||||
background-size: 318px 316px;
|
|
||||||
z-index: 20;
|
|
||||||
}
|
}
|
||||||
#jumbotron .container h2 {
|
.tag-line {
|
||||||
margin-top: 175px;
|
position: absolute;
|
||||||
font-size: 40px;
|
width: 100%;
|
||||||
line-height: 48px;
|
top: 540px;
|
||||||
letter-spacing: 1px;
|
color: #fff;
|
||||||
margin-left: 40px;
|
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) {
|
.animated-logo {
|
||||||
#jumbotron .container h2 {
|
position: absolute;
|
||||||
text-align: center;
|
z-index: 200;
|
||||||
margin-left: 0;
|
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) {
|
@-moz-keyframes Blink {
|
||||||
#jumbotron .container h2 {
|
0% {
|
||||||
margin-top: 130px;
|
opacity: 1;
|
||||||
font-size: 32px;
|
}
|
||||||
|
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 {
|
.outline-btn {
|
||||||
|
|
@ -1025,6 +1333,7 @@ body.page-home #footer {
|
||||||
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
|
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
#demos .terminals .terminal-item .terminal .terminal-window .txt-r {
|
#demos .terminals .terminal-item .terminal .terminal-window .txt-r {
|
||||||
color: #e47078;
|
color: #e47078;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue