├── .gitignore
├── Gulpfile.js
├── LICENSE.md
├── README.md
├── bower.json
├── example
├── index.html
└── index.jade
├── package.json
├── src
└── typeout.js
├── todo.md
└── typeout.min.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
--------------------------------------------------------------------------------
/Gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require("gulp");
2 | var plugins = require("gulp-load-plugins")();
3 | var stylish = require('jshint-stylish');
4 | var browserify = require('browserify');
5 | var transform = require('vinyl-transform');
6 | var to5 = require("gulp-6to5");
7 |
8 | var jsFileGlob = 'src/typeout.js';
9 | var jadeFileGlob = 'example/*.jade';
10 |
11 | gulp.task('js:lint', function() {
12 | return gulp.src(jsFileGlob)
13 | .pipe(plugins.jshint())
14 | .pipe(plugins.jshint.reporter('jshint-stylish'));
15 | });
16 |
17 | gulp.task('js:build', function() {
18 | var browserified = transform(function(filename) {
19 | var b = browserify(filename);
20 | return b.bundle();
21 | });
22 |
23 | return gulp.src(jsFileGlob)
24 | .pipe(browserified)
25 | .pipe(to5())
26 | .pipe(plugins.uglify())
27 | .pipe(plugins.rename({suffix: '.min'}))
28 | .pipe(gulp.dest('./'));
29 | });
30 |
31 | gulp.task('jade:build', function() {
32 | return gulp.src(jadeFileGlob)
33 | .pipe(plugins.jade())
34 | .pipe(gulp.dest('./example/'));
35 | });
36 |
37 | gulp.task('watch', function() {
38 | gulp.watch(jsFileGlob, ['js:lint', 'js:build']);
39 | gulp.watch(jadeFileGlob, ['jade:build']);
40 | });
41 |
42 | gulp.task('default', ['js:lint', 'js:build', 'jade:build', 'watch']);
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Connor Atherton
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## typeout
2 |
3 | Produces a nice text effect increasingly adopted by companies like [Google](), [npm]() and more.
4 |
5 | [See a demo](http://htmlpreview.github.io/?https://github.com/ConnorAtherton/typeout/blob/master/example/index.html)
6 |
7 | ## how to use
8 |
9 | ``` js
10 | /*
11 | * @params selector [string] -
12 | * @params wordList [array] - Contains all the word to write
13 | * @params options [object] - Override default options (shown below)
14 | */
15 |
16 | typeout(selector, word_list, options);
17 | ```
18 |
19 | Usually the selector will reference a **span** element or some other
20 | element that is displaying inline. But it will work with any element.
21 |
22 | ```html
23 |
24 | San Francisco is amazing
25 |
26 | ```
27 |
28 | Any html child element of the selector element will automatically be
29 | appended to the append list. In the example above the word *amazing*
30 | will be added to the world list you pass in.
31 |
32 | ```js
33 | // basic usage with just one loop
34 | typeout('.typeout', ['wonderful', 'eye-opening', 'an experience'], {
35 | callback: function(el) {
36 | el.innerHTML += ".";
37 | }
38 | });
39 | ```
40 |
41 | The code above will typeout all words in the word list once and on completion
42 | will add a period (.) at the end.
43 |
44 | ### default options
45 | ```js
46 | var defaults = {
47 | interval: 3000,
48 | completeClass: 'typeout-complete',
49 | callback : function noop() {},
50 | max: 110, // upper limit for typing speed
51 | min: 40, // lower limit for typing speed
52 | numLoops: 1 // number of loops before the callback is called
53 | };
54 | ```
55 |
56 | You can have an infinite loop passing numLoops as Infinity, but I wouldn't recommend it.
57 | Unless I add es6 generators at some point.
58 |
59 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "typeout",
3 | "version": "0.7.0",
4 | "authors": [
5 | "Connor Atherton "
6 | ],
7 | "description": "Type and retype text in the browser.",
8 | "main": "typeout.min.js",
9 | "keywords": [
10 | "browser",
11 | "type",
12 | "typeout"
13 | ],
14 | "license": "MIT",
15 | "homepage": "https://github.com/ConnorAtherton/typeout",
16 | "ignore": [
17 | "**/.*",
18 | "node_modules",
19 | "bower_components",
20 | "test",
21 | "tests"
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 | Typeout Demo