https://github.com/ics-ikeda/shuffle-text

"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.
https://github.com/ics-ikeda/shuffle-text

effects html5 javascript typescript

Last synced: 3 months ago
JSON representation

"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

• Host: GitHub
• URL: https://github.com/ics-ikeda/shuffle-text
• Owner: ics-ikeda
• License: other
• Created: 2017-04-20T08:36:01.000Z (about 9 years ago)
• Default Branch: main
• Last Pushed: 2025-12-05T02:06:57.000Z (6 months ago)
• Last Synced: 2025-12-07T19:58:35.024Z (6 months ago)
• Topics: effects, html5, javascript, typescript
• Language: JavaScript
• Homepage: http://clockmaker.jp/blog/2012/02/html5_shuffletext/
• Size: 3.73 MB
• Stars: 118
• Watchers: 4
• Forks: 17
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-web-effect - shuffle-text - "shuffle-text" is JavaScript text effect library such as cool legacy of Flash. (🚀 A series of exquisite and compact web page cool effects / Input Effect)
• awesome-web-effect - shuffle-text - "shuffle-text" is JavaScript text effect library such as cool legacy of Flash. (🚀 A series of exquisite and compact web page cool effects / Input Effect)
• awesome-web-animation - Shuffle-text - Shuffle-text is JavaScript text effect library such as cool legacy of Flash. (Text)

README

          
ShuffleText

========

[![Latest NPM release][npm-badge]][npm-badge-url]

[![License][license-badge]][license-badge-url]

This is the JavaScript library for text effect such as Flash contents.

![](./images/shuffle-text-example.gif)

## Setup

### Script Install

```html

```

### NPM Install

```bash

$ npm install shuffle-text

```

If you use this js library in es6.

```js

import ShuffleText from "shuffle-text";

```

## Demo

![](http://clockmaker.jp/blog/wp-content/uploads/2012/02/120207_shuffleelementtext.png)

https://ics-ikeda.github.io/shuffle-text/examples/plain/

## Basic Usage Example

```html

  

  
This is a ShuffleText.js Examle

  

    const el = document.getElementById("myText");

    const text = new ShuffleText(el);

    text.start();

  


```

## Showcase

![](http://clockmaker.jp/labs/_labs/images/preview_160208.jpg)

[ClockMaker Labs \- Interaction Design × Web Technology](https://labs.clockmaker.jp/)

![](http://beautifl.net/imgs/summary_large_image.png)

[Beautifl \- Flash Gallery of wonderfl](https://beautifl.net/)

![](http://ics-web.jp/imgs/140220_pollenmap_4.png)

[日本全国花粉飛散マップ Pollen Map in Japan \| ICS](https://ics-web.jp/projects/pollenmap/)

## APIs

Constructor

```js

new ShuffleText(element)

```

[API Reference](https://ics-ikeda.github.io/shuffle-text/docs/) is here.

[npm-badge]: https://img.shields.io/npm/v/shuffle-text.svg

[npm-badge-url]: https://www.npmjs.com/package/shuffle-text

[license-badge]: https://img.shields.io/npm/l/shuffle-text.svg

[license-badge-url]: ./LICENSE