Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcreichel/alpine-typewriter
Little Alpine.js plugin to add a typewriter effect to any HTML element.
https://github.com/marcreichel/alpine-typewriter
alpinejs alpinejs-plugin hacktoberfest plugin typewriter typewriter-animation typewriter-effect
Last synced: 8 days ago
JSON representation
Little Alpine.js plugin to add a typewriter effect to any HTML element.
- Host: GitHub
- URL: https://github.com/marcreichel/alpine-typewriter
- Owner: marcreichel
- License: mit
- Created: 2022-08-16T20:20:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-20T22:49:01.000Z (11 months ago)
- Last Synced: 2024-05-01T14:32:48.861Z (6 months ago)
- Topics: alpinejs, alpinejs-plugin, hacktoberfest, plugin, typewriter, typewriter-animation, typewriter-effect
- Language: JavaScript
- Homepage:
- Size: 131 KB
- Stars: 100
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - Alpine Typewrite - Add a typewriter animation to any HTML element
README
⌨️ Alpine Typewriter ⌨️
An Alpine.js plugin to add a typewriter effect to any HTML element.
## 🚀 Installation
### CDN
Include the following `` tag in the `<head>` of your document, just before Alpine.
```html
<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-typewriter/dist/alpine-typewriter.min.js" defer>
```
### NPM
```shell
npm install @marcreichel/alpine-typewriter
```
Add the `x-typewriter` directive to your project by importing the package **before** starting Alpine.
```js
import Alpine from 'alpinejs';
import Typewriter from '@marcreichel/alpine-typewriter';
Alpine.plugin(Typewriter);
Alpine.start();
```
## 🪄 Usage
Simply add the `x-typewriter` directive to any HTML element and provide the texts which should be cycled through.
```html
```
### Adjust the speed
By default, a text stays for 2 seconds before being swapped out. This behavior may be adjusted using a modifier like so:
```html
```
or
```html
```
### Add an animated cursor
To add a blinking cursor add the `cursor` modifier like so:
```html
```
## 📄 License
Copyright (c) 2023 Marc Reichel and contributors.
Licensed under the MIT license, see [LICENSE](LICENSE) for details.