Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 1 month 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 (over 7 years ago)
Default Branch: main
Last Pushed: 2024-09-23T22:57:44.000Z (3 months ago)
Last Synced: 2024-10-28T22:13:42.666Z (about 1 month ago)
Topics: effects, html5, javascript, typescript
Language: JavaScript
Homepage: http://clockmaker.jp/blog/2012/02/html5_shuffletext/
Size: 3.7 MB
Stars: 107
Watchers: 5
Forks: 16
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.

![](https://github.com/ics-ikeda/shuffle-text/raw/master/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

  

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

    var text = new ShuffleText(el);

    text.start();

  

```

## Showcase

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

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

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

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

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

[日本全国花粉飛散マップ Pollen Map in Japan \| ICS](http://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

[dependencies-badge]: https://img.shields.io/david/ics-ikeda/shuffle-text.svg

[dependencies-badge-url]: https://david-dm.org/ics-ikeda/shuffle-text

[devDependencies-badge]: https://img.shields.io/david/dev/ics-ikeda/shuffle-text.svg

[devDependencies-badge-url]: https://david-dm.org/ics-ikeda/shuffle-text#info=devDependencies