@tasul/shuffle-text v1.0.4

ShuffleText

'ShuffleText' is a JavaScript library for text switching effects.
You can switch any words or sentences you want to show randomly or in order.

📌 Install

npm i @tasul/shuffle-text

📌 Basic Usage

// html
<div class="my-target"></div>

// js
// const myShuffle = new ShuffleText(target, options)
const shuffleText = new ShuffleText(".my-target", {
  textArray: [ "Hello", "Yo!", "¡Hola!", "Salut", "Ciao", "안녕하세요", "こんにちは" ],
  isAuto: false,
  isReplacedRandomly: false,
  isDisorderedArray: false, 
  stayTime: 1500, 
  replaceTime: 50, 
})

Cases

// case 1
const shuffleText1 = new ShuffleText(".my-target-1", {
  textArray: [ "Hello", "Yo!", "¡Hola!", "Salut", "Ciao", "안녕하세요", "こんにちは" ],
  isAuto: true,
})

// case 2
const shuffleText2 = new ShuffleText(".my-target-2", {
  textArray: [ "Hello", "Yo!", "¡Hola!", "Salut", "Ciao", "안녕하세요", "こんにちは" ],
  isAuto: true,
  isReplacedRandomly: true,
})

// case 3
const shuffleText3 = new ShuffleText(".my-target-3", {
  textArray: [ "Hello", "Yo!", "¡Hola!", "Salut", "Ciao", "안녕하세요", "こんにちは" ],
  isAuto: true,
  isDisorderedArray: true, 
})

// case 4
const shuffleText4 = new ShuffleText(".my-target-4", {
  textArray: [ "Hello", "Yo!", "¡Hola!", "Salut", "Ciao", "안녕하세요", "こんにちは" ],
  isAuto: true,
  isReplacedRandomly: true,
  isDisorderedArray: true, 
})

📌 Parameter

target

The element that you want to use 'shuffle text'.
Use the ‘id’ or ‘class’ name of the element.

options

📌 Methods