Improved Typewriter with cursor
This commit is contained in:
parent
64adfce427
commit
26d45774dc
|
@ -3,7 +3,7 @@
|
||||||
<div id="jumbotron">
|
<div id="jumbotron">
|
||||||
<div class="galaxy-image" id="galaxy-bg"></div>
|
<div class="galaxy-image" id="galaxy-bg"></div>
|
||||||
<div class="jumbotron-content" id="jumbotron-content">
|
<div class="jumbotron-content" id="jumbotron-content">
|
||||||
<h2 class="tag-line" id="tag-line">Build, Combine and Launch Infrastucture</h2>
|
<h2 class="tag-line" id="tag-line">Build, Combine, and Launch Infrastucture</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -0,0 +1,72 @@
|
||||||
|
/* 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 = '';
|
||||||
|
|
||||||
|
console.dir(this);
|
||||||
|
};
|
||||||
|
|
||||||
|
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);
|
|
@ -58,27 +58,12 @@ Engine = Base.extend({
|
||||||
this.setupEvents();
|
this.setupEvents();
|
||||||
this.setupStarfield();
|
this.setupStarfield();
|
||||||
this.setupTessellation();
|
this.setupTessellation();
|
||||||
|
this.setupMisc();
|
||||||
|
|
||||||
this.last = Date.now() / 1000;
|
this.startEngine();
|
||||||
this.render = this.render.bind(this);
|
|
||||||
|
|
||||||
this.start();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
setupEvents: function(){
|
startEngine: 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);
|
|
||||||
},
|
|
||||||
|
|
||||||
start: function(){
|
|
||||||
var parent = this.canvas.parentNode;
|
var parent = this.canvas.parentNode;
|
||||||
|
|
||||||
this.background.className += ' show';
|
this.background.className += ' show';
|
||||||
|
@ -89,10 +74,6 @@ Engine = Base.extend({
|
||||||
.then(function(){
|
.then(function(){
|
||||||
this.starGeneratorRate = 200;
|
this.starGeneratorRate = 200;
|
||||||
}, this)
|
}, this)
|
||||||
.wait(1000)
|
|
||||||
.then(function(){
|
|
||||||
this.showGrid = true;
|
|
||||||
}, this)
|
|
||||||
.wait(2000)
|
.wait(2000)
|
||||||
.then(function(){
|
.then(function(){
|
||||||
parent.className += ' state-one';
|
parent.className += ' state-one';
|
||||||
|
@ -115,11 +96,37 @@ Engine = Base.extend({
|
||||||
}, this)
|
}, this)
|
||||||
.wait(1000)
|
.wait(1000)
|
||||||
.then(function(){
|
.then(function(){
|
||||||
|
this.showGrid = true;
|
||||||
|
}, this)
|
||||||
|
.wait(1000)
|
||||||
|
.then(function(){
|
||||||
|
this.typewriter.start();
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
this.render();
|
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(){
|
setupStarfield: function(){
|
||||||
this.particles = [];
|
this.particles = [];
|
||||||
// this.generateParticles(50, true);
|
// this.generateParticles(50, true);
|
||||||
|
@ -243,6 +250,8 @@ Engine = Base.extend({
|
||||||
.draw(this.context, scale, this);
|
.draw(this.context, scale, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.typewriter.update(this);
|
||||||
|
|
||||||
this.last = this.now;
|
this.last = this.now;
|
||||||
|
|
||||||
this.generateParticles(this.starGeneratorRate * this.tick >> 0);
|
this.generateParticles(this.starGeneratorRate * this.tick >> 0);
|
||||||
|
|
|
@ -40,6 +40,7 @@
|
||||||
<script type="text/javascript" src="/javascripts/app/Engine.Polygon.Puller.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.js"></script>
|
||||||
<script type="text/javascript" src="/javascripts/app/Engine.Shape.Puller.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>
|
<script type="text/javascript" src="/javascripts/app/Init.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -306,3 +306,92 @@
|
||||||
-o-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);
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -819,6 +819,84 @@ body.page-home #footer {
|
||||||
-o-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);
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
.outline-btn {
|
.outline-btn {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
|
Loading…
Reference in New Issue