Shuffle texts.

Overview

shuffleText

This is JavaScript file.
When mouse over element shuffle texts in html.
It is easy to use it for everyone.

Update Infomation

If you make setting 'onload' 'true' execute when loaded.
If you make setting 'delay' 'true' displayed in order from top.

Demo

License

MIT

How to use

Add a class to the element you want to shuffle.
You can change shuffle speed.
In that case, pass over you like numbers to 'shuffleInit'.

// html element
<h1>Shuffle Text on mouseover.</h1>
<ul>
  <li><a href="#" class="shuffleText">HOME</a></li>
  <li><a href="#" class="shuffleText">ABOUT</a></li>
  <li><a href="#" class="shuffleText">NEWS</a></li>
  <li><a href="#" class="shuffleText">ACCESS</a></li>
  <li><a href="#" class="shuffleText">PRICE</a></li>
  <li><a href="#" class="shuffleText">CONTACT</a></li>
</ul>

// call file
<script src="./shuffleText.js"></script>

// settings
<script>
  shuffleInit({
    class_name: 'shuffleText', // input your favorite class name.
    onload: true, // shuffle when loaded.
    delay: true, // displayed in order from top.
    number_of_iterations: 100,
    iteration_speed: 5,
    displayed_speed: 80, 
  });
</script>
You might also like...
Owner
Toshiya Marukubo
An amateur writing a code wants to be a shader.
Toshiya Marukubo
A JavaScript library to shuffle the text content of a DOM element with an animated effect.

shuffle-letters.js A JavaScript library to shuffle the text content of a DOM element with an animated effect. NOTE: This library is a port to vanilla

George Raptis 6 Jun 2, 2022
AnonCrypt ciphers and diciphers your messages or strings which makes you send texts to people without them understanding it.

AnonCrypt ciphers and diciphers your messages or strings which makes you send texts to people without them understanding it. Anoncrypt uses Aes192 cipher encryption type and not Hmac.

AnonyminHack5 11 Oct 23, 2022
simple JavaScript library to animate texts

Animated Texts Hi, this library is a simple javascript text animator Properties force type: number default: 300 start_delay_time type: number default:

Cristóvão 4 Jan 11, 2022
🎉🎉🎉like vcsode, string/texts can be replaced in file(s).

tiny-replace-files Like vscode, simple utility to quickly replace text in one or more files. ?? Getting Started install # npm npm install --save tiny

兔子先生 16 Nov 22, 2022
The Simplest Way to shuffle through images in a Creative Way

#Shuffle Images by Pete R. Shuffle Images let you display and shuffle multiple images by moving cursor around or several other ways to trigger.This pl

Pete R. 212 Nov 5, 2022
"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

ShuffleText This is the JavaScript library for text effect such as Flash contents. Setup Script Install <script src="shuffle-text.js"></script> NPM In

Yasunobu Ikeda 96 Dec 24, 2022
A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.

Letter Shuffle Animation for a Menu A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item

Codrops 29 Dec 4, 2022
A JavaScript library to shuffle the text content of a DOM element with an animated effect.

shuffle-letters.js A JavaScript library to shuffle the text content of a DOM element with an animated effect. NOTE: This library is a port to vanilla

George Raptis 6 Jun 2, 2022