forked from mattboldt/typed.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
7 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -33,7 +33,7 @@ yarn add typed.js | |
| For use directly in the browser via `<script>` tag: | ||
|
|
||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/typed.umd.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/typed.umd.js"></script> | ||
| ``` | ||
|
|
||
| #### Setup | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -170,7 +170,7 @@ <h4 id="yarn">Yarn</h4> | |
| <pre><code><code class="source-code prettyprint">yarn add typed.js</code> | ||
| </code></pre> | ||
| <h4 id="cdn">CDN</h4> | ||
| <pre><code class="lang-html"><code class="source-code prettyprint"><script src="https://cdn.jsdelivr.net/npm/[email protected]"></script></code> | ||
| <pre><code class="lang-html"><code class="source-code prettyprint"><script src="https://cdn.jsdelivr.net/npm/[email protected].1"></script></code> | ||
| </code></pre> | ||
| <h4 id="setup">Setup</h4> | ||
| <p>This is really all you need to get going.</p> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2240,15 +2240,15 @@ | |
| }, | ||
| { | ||
| "kind": "index", | ||
| "content": "[](https://travis-ci.org/mattboldt/typed.js)\n[](https://codeclimate.com/github/mattboldt/typed.js)\n[]()\n[](https://img.shields.io/npm/dt/typed.js.svg)\n[](https://raw.githubusercontent.com/mattboldt/typed.js/master/LICENSE.txt)\n\n<img src=\"https://raw.githubusercontent.com/mattboldt/typed.js/master/logo-cropped.png\" width=\"450px\" title=\"Typed.js\" />\n\n### [Live Demo](http:https://www.mattboldt.com/demos/typed-js/) | [View All Demos](http:https://mattboldt.github.io/typed.js/) | [View Full Docs](http:https://mattboldt.github.io/typed.js/docs) | [mattboldt.com](http:https://www.mattboldt.com)\n\nTyped.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.\n\n---\n\n## Installation\n\n#### NPM\n\n```\nnpm install typed.js\n```\n\n#### Yarn\n\n```\nyarn add typed.js\n```\n\n#### CDN\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/[email protected]\"></script>\n```\n\n#### Setup\n\nThis is really all you need to get going.\n\n```javascript\n// Can also be included with a regular script tag\nimport Typed from 'typed.js';\n\nvar options = {\n strings: ['<i>First</i> sentence.', '& a second sentence.'],\n typeSpeed: 40,\n};\n\nvar typed = new Typed('.element', options);\n```\n\n### Use with ReactJS\n\nHook-based function component: https://jsfiddle.net/mattboldt/60h9an7y/\n\nClass component: https://jsfiddle.net/mattboldt/ovat9jmp/\n\n### Use with Vue.js\n\nCheck out the Vue.js component: https://github.com/Orlandster/vue-typed-js\n\n### Use it as WebComponent\n\nCheck out the WebComponent: https://github.com/Orlandster/wc-typed-js\n\n## Wonderful sites that have used (or are using) Typed.js\n\nhttps://github.com/features/package-registry\n\nhttps://slack.com/\n\nhttps://envato.com/\n\nhttps://gorails.com/\n\nhttps://productmap.co/\n\nhttps://www.typed.com/\n\nhttps://apeiron.io\n\nhttps://git.market/\n\nhttps://commando.io/\n\nhttp:https://testdouble.com/agency.html\n\nhttps://www.capitalfactory.com/\n\nhttp:https://www.maxcdn.com/\n\nhttps://www.powerauth.com/\n\n---\n\n### Strings from static HTML (SEO Friendly)\n\nRather than using the `strings` array to insert strings, you can place an HTML `div` on the page and read from it.\nThis allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.\n\n```javascript\n<script>\n var typed = new Typed('#typed', {\n stringsElement: '#typed-strings'\n });\n</script>\n```\n\n```html\n<div id=\"typed-strings\">\n <p>Typed.js is a <strong>JavaScript</strong> library.</p>\n <p>It <em>types</em> out sentences.</p>\n</div>\n<span id=\"typed\"></span>\n```\n\n### Type Pausing\n\nYou can pause in the middle of a string for a given amount of time by including an escape character.\n\n```javascript\nvar typed = new Typed('.element', {\n // Waits 1000ms after typing \"First\"\n strings: ['First ^1000 sentence.', 'Second sentence.'],\n});\n```\n\n### Smart Backspacing\n\nIn the following example, this would only backspace the words after \"This is a\"\n\n```javascript\nvar typed = new Typed('.element', {\n strings: ['This is a JavaScript library', 'This is an ES6 module'],\n smartBackspace: true, // Default value\n});\n```\n\n### Bulk Typing\n\nThe following example would emulate how a terminal acts when typing a command and seeing its result.\n\n```javascript\nvar typed = new Typed('.element', {\n strings: ['git push --force ^1000\\n `pushed to origin with option force`'],\n});\n```\n\n### CSS\n\nCSS animations are built upon initialization in JavaScript. But, you can customize them at your will! These classes are:\n\n```css\n/* Cursor */\n.typed-cursor {\n}\n\n/* If fade out option is set */\n.typed-fade-out {\n}\n```\n\n## Customization\n\n```javascript\nvar typed = new Typed('.element', {\n /**\n * @property {array} strings strings to be typed\n * @property {string} stringsElement ID of element containing string children\n */\n strings: [\n 'These are the default values...',\n 'You know what you should do?',\n 'Use your own!',\n 'Have a great day!',\n ],\n stringsElement: null,\n\n /**\n * @property {number} typeSpeed type speed in milliseconds\n */\n typeSpeed: 0,\n\n /**\n * @property {number} startDelay time before typing starts in milliseconds\n */\n startDelay: 0,\n\n /**\n * @property {number} backSpeed backspacing speed in milliseconds\n */\n backSpeed: 0,\n\n /**\n * @property {boolean} smartBackspace only backspace what doesn't match the previous string\n */\n smartBackspace: true,\n\n /**\n * @property {boolean} shuffle shuffle the strings\n */\n shuffle: false,\n\n /**\n * @property {number} backDelay time before backspacing in milliseconds\n */\n backDelay: 700,\n\n /**\n * @property {boolean} fadeOut Fade out instead of backspace\n * @property {string} fadeOutClass css class for fade animation\n * @property {boolean} fadeOutDelay Fade out delay in milliseconds\n */\n fadeOut: false,\n fadeOutClass: 'typed-fade-out',\n fadeOutDelay: 500,\n\n /**\n * @property {boolean} loop loop strings\n * @property {number} loopCount amount of loops\n */\n loop: false,\n loopCount: Infinity,\n\n /**\n * @property {boolean} showCursor show cursor\n * @property {string} cursorChar character for cursor\n * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>\n */\n showCursor: true,\n cursorChar: '|',\n autoInsertCss: true,\n\n /**\n * @property {string} attr attribute for typing\n * Ex: input placeholder, value, or just HTML text\n */\n attr: null,\n\n /**\n * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input\n */\n bindInputFocusEvents: false,\n\n /**\n * @property {string} contentType 'html' or 'null' for plaintext\n */\n contentType: 'html',\n\n /**\n * Before it begins typing\n * @param {Typed} self\n */\n onBegin: (self) => {},\n\n /**\n * All typing is complete\n * @param {Typed} self\n */\n onComplete: (self) => {},\n\n /**\n * Before each string is typed\n * @param {number} arrayPos\n * @param {Typed} self\n */\n preStringTyped: (arrayPos, self) => {},\n\n /**\n * After each string is typed\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStringTyped: (arrayPos, self) => {},\n\n /**\n * During looping, after last string is typed\n * @param {Typed} self\n */\n onLastStringBackspaced: (self) => {},\n\n /**\n * Typing has been stopped\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onTypingPaused: (arrayPos, self) => {},\n\n /**\n * Typing has been started after being stopped\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onTypingResumed: (arrayPos, self) => {},\n\n /**\n * After reset\n * @param {Typed} self\n */\n onReset: (self) => {},\n\n /**\n * After stop\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStop: (arrayPos, self) => {},\n\n /**\n * After start\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStart: (arrayPos, self) => {},\n\n /**\n * After destroy\n * @param {Typed} self\n */\n onDestroy: (self) => {},\n});\n```\n\n## Contributing\n\n### [View Contribution Guidelines](./.github/CONTRIBUTING.md)\n\n## end\n\nThanks for checking this out. If you have any questions, I'll be on [Twitter](https://twitter.com/atmattb).\n\nIf you're using this, let me know! I'd love to see it.\n\nIt would also be great if you mentioned me or my website somewhere. [www.mattboldt.com](http:https://www.mattboldt.com)\n", | ||
| "content": "[](https://travis-ci.org/mattboldt/typed.js)\n[](https://codeclimate.com/github/mattboldt/typed.js)\n[]()\n[](https://img.shields.io/npm/dt/typed.js.svg)\n[](https://raw.githubusercontent.com/mattboldt/typed.js/master/LICENSE.txt)\n\n<img src=\"https://raw.githubusercontent.com/mattboldt/typed.js/master/logo-cropped.png\" width=\"450px\" title=\"Typed.js\" />\n\n### [Live Demo](http:https://www.mattboldt.com/demos/typed-js/) | [View All Demos](http:https://mattboldt.github.io/typed.js/) | [View Full Docs](http:https://mattboldt.github.io/typed.js/docs) | [mattboldt.com](http:https://www.mattboldt.com)\n\nTyped.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.\n\n---\n\n## Installation\n\n#### NPM\n\n```\nnpm install typed.js\n```\n\n#### Yarn\n\n```\nyarn add typed.js\n```\n\n#### CDN\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/[email protected]\"></script>\n```\n\n#### Setup\n\nThis is really all you need to get going.\n\n```javascript\n// Can also be included with a regular script tag\nimport Typed from 'typed.js';\n\nvar options = {\n strings: ['<i>First</i> sentence.', '& a second sentence.'],\n typeSpeed: 40,\n};\n\nvar typed = new Typed('.element', options);\n```\n\n### Use with ReactJS\n\nHook-based function component: https://jsfiddle.net/mattboldt/60h9an7y/\n\nClass component: https://jsfiddle.net/mattboldt/ovat9jmp/\n\n### Use with Vue.js\n\nCheck out the Vue.js component: https://github.com/Orlandster/vue-typed-js\n\n### Use it as WebComponent\n\nCheck out the WebComponent: https://github.com/Orlandster/wc-typed-js\n\n## Wonderful sites that have used (or are using) Typed.js\n\nhttps://github.com/features/package-registry\n\nhttps://slack.com/\n\nhttps://envato.com/\n\nhttps://gorails.com/\n\nhttps://productmap.co/\n\nhttps://www.typed.com/\n\nhttps://apeiron.io\n\nhttps://git.market/\n\nhttps://commando.io/\n\nhttp:https://testdouble.com/agency.html\n\nhttps://www.capitalfactory.com/\n\nhttp:https://www.maxcdn.com/\n\nhttps://www.powerauth.com/\n\n---\n\n### Strings from static HTML (SEO Friendly)\n\nRather than using the `strings` array to insert strings, you can place an HTML `div` on the page and read from it.\nThis allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.\n\n```javascript\n<script>\n var typed = new Typed('#typed', {\n stringsElement: '#typed-strings'\n });\n</script>\n```\n\n```html\n<div id=\"typed-strings\">\n <p>Typed.js is a <strong>JavaScript</strong> library.</p>\n <p>It <em>types</em> out sentences.</p>\n</div>\n<span id=\"typed\"></span>\n```\n\n### Type Pausing\n\nYou can pause in the middle of a string for a given amount of time by including an escape character.\n\n```javascript\nvar typed = new Typed('.element', {\n // Waits 1000ms after typing \"First\"\n strings: ['First ^1000 sentence.', 'Second sentence.'],\n});\n```\n\n### Smart Backspacing\n\nIn the following example, this would only backspace the words after \"This is a\"\n\n```javascript\nvar typed = new Typed('.element', {\n strings: ['This is a JavaScript library', 'This is an ES6 module'],\n smartBackspace: true, // Default value\n});\n```\n\n### Bulk Typing\n\nThe following example would emulate how a terminal acts when typing a command and seeing its result.\n\n```javascript\nvar typed = new Typed('.element', {\n strings: ['git push --force ^1000\\n `pushed to origin with option force`'],\n});\n```\n\n### CSS\n\nCSS animations are built upon initialization in JavaScript. But, you can customize them at your will! These classes are:\n\n```css\n/* Cursor */\n.typed-cursor {\n}\n\n/* If fade out option is set */\n.typed-fade-out {\n}\n```\n\n## Customization\n\n```javascript\nvar typed = new Typed('.element', {\n /**\n * @property {array} strings strings to be typed\n * @property {string} stringsElement ID of element containing string children\n */\n strings: [\n 'These are the default values...',\n 'You know what you should do?',\n 'Use your own!',\n 'Have a great day!',\n ],\n stringsElement: null,\n\n /**\n * @property {number} typeSpeed type speed in milliseconds\n */\n typeSpeed: 0,\n\n /**\n * @property {number} startDelay time before typing starts in milliseconds\n */\n startDelay: 0,\n\n /**\n * @property {number} backSpeed backspacing speed in milliseconds\n */\n backSpeed: 0,\n\n /**\n * @property {boolean} smartBackspace only backspace what doesn't match the previous string\n */\n smartBackspace: true,\n\n /**\n * @property {boolean} shuffle shuffle the strings\n */\n shuffle: false,\n\n /**\n * @property {number} backDelay time before backspacing in milliseconds\n */\n backDelay: 700,\n\n /**\n * @property {boolean} fadeOut Fade out instead of backspace\n * @property {string} fadeOutClass css class for fade animation\n * @property {boolean} fadeOutDelay Fade out delay in milliseconds\n */\n fadeOut: false,\n fadeOutClass: 'typed-fade-out',\n fadeOutDelay: 500,\n\n /**\n * @property {boolean} loop loop strings\n * @property {number} loopCount amount of loops\n */\n loop: false,\n loopCount: Infinity,\n\n /**\n * @property {boolean} showCursor show cursor\n * @property {string} cursorChar character for cursor\n * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>\n */\n showCursor: true,\n cursorChar: '|',\n autoInsertCss: true,\n\n /**\n * @property {string} attr attribute for typing\n * Ex: input placeholder, value, or just HTML text\n */\n attr: null,\n\n /**\n * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input\n */\n bindInputFocusEvents: false,\n\n /**\n * @property {string} contentType 'html' or 'null' for plaintext\n */\n contentType: 'html',\n\n /**\n * Before it begins typing\n * @param {Typed} self\n */\n onBegin: (self) => {},\n\n /**\n * All typing is complete\n * @param {Typed} self\n */\n onComplete: (self) => {},\n\n /**\n * Before each string is typed\n * @param {number} arrayPos\n * @param {Typed} self\n */\n preStringTyped: (arrayPos, self) => {},\n\n /**\n * After each string is typed\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStringTyped: (arrayPos, self) => {},\n\n /**\n * During looping, after last string is typed\n * @param {Typed} self\n */\n onLastStringBackspaced: (self) => {},\n\n /**\n * Typing has been stopped\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onTypingPaused: (arrayPos, self) => {},\n\n /**\n * Typing has been started after being stopped\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onTypingResumed: (arrayPos, self) => {},\n\n /**\n * After reset\n * @param {Typed} self\n */\n onReset: (self) => {},\n\n /**\n * After stop\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStop: (arrayPos, self) => {},\n\n /**\n * After start\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStart: (arrayPos, self) => {},\n\n /**\n * After destroy\n * @param {Typed} self\n */\n onDestroy: (self) => {},\n});\n```\n\n## Contributing\n\n### [View Contribution Guidelines](./.github/CONTRIBUTING.md)\n\n## end\n\nThanks for checking this out. If you have any questions, I'll be on [Twitter](https://twitter.com/atmattb).\n\nIf you're using this, let me know! I'd love to see it.\n\nIt would also be great if you mentioned me or my website somewhere. [www.mattboldt.com](http:https://www.mattboldt.com)\n", | ||
| "longname": "/Users/mattboldt/Documents/dev/Repos/typedjs/README.md", | ||
| "name": "./README.md", | ||
| "static": true, | ||
| "access": "public" | ||
| }, | ||
| { | ||
| "kind": "packageJSON", | ||
| "content": "{\n \"name\": \"typed.js\",\n \"version\": \"2.0.13\",\n \"homepage\": \"https://github.com/mattboldt/typed.js\",\n \"repository\": \"https://github.com/mattboldt/typed.js\",\n \"license\": \"MIT\",\n \"author\": \"Matt Boldt\",\n \"description\": \"A JavaScript Typing Animation Library\",\n \"type\": \"module\",\n \"source\": \"src/typed.js\",\n \"types\": \"./index.d.ts\",\n \"files\": [\n \"dist\",\n \"index.d.ts\"\n ],\n \"exports\": {\n \"require\": \"./dist/typed.cjs\",\n \"import\": \"./dist/typed.module.js\"\n },\n \"main\": \"./dist/typed.cjs\",\n \"module\": \"./dist/typed.module.js\",\n \"unpkg\": \"./dist/typed.umd.js\",\n \"keywords\": [\n \"typed\",\n \"animation\"\n ],\n \"devDependencies\": {\n \"esdoc\": \"^1.1.0\",\n \"esdoc-ecmascript-proposal-plugin\": \"^1.0.0\",\n \"esdoc-standard-plugin\": \"^1.0.0\",\n \"microbundle\": \"^0.15.1\"\n },\n \"scripts\": {\n \"build\": \"microbundle --name=Typed\",\n \"dev\": \"microbundle --name=Typed watch\"\n }\n}\n", | ||
| "content": "{\n \"name\": \"typed.js\",\n \"version\": \"2.0.13.1\",\n \"homepage\": \"https://github.com/mattboldt/typed.js\",\n \"repository\": \"https://github.com/mattboldt/typed.js\",\n \"license\": \"MIT\",\n \"author\": \"Matt Boldt\",\n \"description\": \"A JavaScript Typing Animation Library\",\n \"type\": \"module\",\n \"source\": \"src/typed.js\",\n \"types\": \"./index.d.ts\",\n \"files\": [\n \"dist\",\n \"index.d.ts\"\n ],\n \"exports\": {\n \"require\": \"./dist/typed.cjs\",\n \"import\": \"./dist/typed.module.js\"\n },\n \"main\": \"./dist/typed.cjs\",\n \"module\": \"./dist/typed.module.js\",\n \"unpkg\": \"./dist/typed.umd.js\",\n \"keywords\": [\n \"typed\",\n \"animation\"\n ],\n \"devDependencies\": {\n \"esdoc\": \"^1.1.0\",\n \"esdoc-ecmascript-proposal-plugin\": \"^1.0.0\",\n \"esdoc-standard-plugin\": \"^1.0.0\",\n \"microbundle\": \"^0.15.1\"\n },\n \"scripts\": {\n \"build\": \"microbundle --name=Typed\",\n \"dev\": \"microbundle --name=Typed watch\"\n }\n}\n", | ||
| "longname": "/Users/mattboldt/Documents/dev/Repos/typedjs/package.json", | ||
| "name": "package.json", | ||
| "static": true, | ||
|
|
||
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters