ResiLien
/
terraform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved Typewriter with cursor

This commit is contained in:
Amadeus Demarzi 2014-07-26 01:55:57 -07:00
parent 64adfce427
commit 26d45774dc
6 changed files with 272 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
website/source/index.html.erb
View File

@ -3,7 +3,7 @@
<div id="jumbotron">
<div class="galaxy-image" id="galaxy-bg"></div>
<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>

72
website/source/javascripts/app/Engine.Typewriter.js Normal file
View File

@ -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);

53
website/source/javascripts/app/Engine.js
View File

@ -58,27 +58,12 @@ Engine = Base.extend({
this.setupEvents();
this.setupStarfield();
this.setupTessellation();
this.setupMisc();
this.last = Date.now() / 1000;
this.render = this.render.bind(this);
this.start();
this.startEngine();
},
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);
},
start: function(){
startEngine: function(){
var parent = this.canvas.parentNode;
this.background.className += ' show';
@ -89,10 +74,6 @@ Engine = Base.extend({
.then(function(){
this.starGeneratorRate = 200;
}, this)
.wait(1000)
.then(function(){
this.showGrid = true;
}, this)
.wait(2000)
.then(function(){
parent.className += ' state-one';
@ -115,11 +96,37 @@ Engine = Base.extend({
}, this)
.wait(1000)
.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);
@ -243,6 +250,8 @@ Engine = Base.extend({
.draw(this.context, scale, this);
}
this.typewriter.update(this);
this.last = this.now;
this.generateParticles(this.starGeneratorRate * this.tick >> 0);

1
website/source/layouts/_footer.erb
View File

@ -40,6 +40,7 @@
<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>

89
website/source/stylesheets/_jumbotron.less
View File

@ -306,3 +306,92 @@
-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;
}
}

78
website/source/stylesheets/main.css
View File

@ -819,6 +819,84 @@ body.page-home #footer {
-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;
}
}
.outline-btn {
background-color: transparent;
color: #ffffff;