string-scrambler-js-plus
v1.0.13
Published
Um pacote para animar strings com diferentes modos de embaralhamento.
Maintainers
lordharkonReadme
String Scrambler JS Plus
Um pacote para animar strings com diferentes modos de embaralhamento, permitindo criar efeitos de texto dinâmico e envolvente em seus projetos web.
Índice
Instalação
Via NPM
Você pode instalar o String Scrambler JS Plus usando o NPM com o seguinte comando:
npm install string-scrambler-js-plusVia CDN
Inclua o script UMD diretamente no seu HTML usando um dos serviços de CDN:
unpkg:
<script src="https://unpkg.com/string-scrambler-js-plus@latest/dist/string-scrambler.umd.js"></script>jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/string-scrambler-js-plus@latest/dist/string-scrambler.umd.js"></script>
Uso
Via NPM
Após instalar o pacote, você pode importá-lo em seu projeto JavaScript:
import { StringScrambler } from 'string-scrambler-js-plus';
// Selecionar elementos do DOM
const output = document.getElementById('output');
// Criar uma instância do StringScrambler
const scrambler = new StringScrambler();
// Configurar a animação
scrambler.configure({
start: 'Hello',
end: 'World!',
mode: 'random', // Pode ser 'random', 'sequential' ou 'wave'
onUpdate: (text) => {
output.innerText = text;
},
onComplete: () => {
console.log('Animação completa!');
},
});
// Iniciar a animação
scrambler.init();Via CDN
Se estiver usando o String Scrambler JS Plus via CDN, a classe estará disponível globalmente como StringScrambler.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>String Scrambler Demo</title>
</head>
<body>
<div id="output">Hello </div>
<button id="startButton">Iniciar Animação</button>
<!-- Importação do pacote via CDN -->
<script src="https://unpkg.com/string-scrambler-js-plus@latest/dist/string-scrambler.umd.js"></script>
<script>
// Selecionar elementos do DOM
const output = document.getElementById('output');
const startButton = document.getElementById('startButton');
// Criar uma instância do StringScrambler
const scrambler = new StringScrambler();
// Configurar a animação
scrambler.configure({
start: 'Hello',
end: 'World!',
mode: 'random', // Pode ser 'random', 'sequential' ou 'wave'
onUpdate: (text) => {
output.innerText = text;
},
onComplete: () => {
console.log('Animação completa!');
},
});
// Função para iniciar a animação
function startAnimation() {
scrambler.init();
}
// Adicionar evento ao botão
startButton.addEventListener('click', startAnimation);
</script>
</body>
</html>Modos Disponíveis
- Random (
random): As letras são embaralhadas aleatoriamente durante a animação. - Sequential (
sequential): As letras são embaralhadas em ordem sequencial. - Wave (
wave): As letras são embaralhadas seguindo um padrão de onda.
Exemplo
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>String Scrambler - Exemplo Local</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
border: 2px solid #333;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
}
#output-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.output {
font-size: 2em;
font-weight: bold;
margin: 10px;
width: 250px;
min-height: 2.5rem; /* Garante espaço para a animação */
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
select,
button {
margin: 10px;
padding: 10px;
font-size: 1em;
cursor: pointer;
}
button {
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>String Scrambler Demo</h1>
<br />
<button id="startButton">Iniciar Animação</button>
<div id="output-container">
<div id="output-random" class="output">Hello</div>
<div id="output-sequential" class="output">Hello</div>
<div id="output-wave" class="output">Hello</div>
</div>
</div>
<script type="module">
import { StringScrambler } from "./string-scrambler-js-plus.js"; // Importação do arquivo JS
document.getElementById("startButton").addEventListener("click", () => {
// Cria uma instância de StringScrambler para cada modo
const randomScrambler = new StringScrambler({
start: "Hello",
end: "World",
mode: "random",
duration: 2000,
transitionPause: 1500,
loop: true,
autoreverse: true,
easingType: "ease-in-out",
onUpdate: (text) =>
(document.getElementById("output-random").textContent = text),
});
const sequentialScrambler = new StringScrambler({
start: "Hello",
end: "World",
mode: "sequential",
duration: 2000,
transitionPause: 1500,
loop: true,
autoreverse: true,
easingType: "ease-in-out",
onUpdate: (text) =>
(document.getElementById("output-sequential").textContent = text),
});
const waveScrambler = new StringScrambler({
start: "Hello",
end: "World",
mode: "wave",
duration: 2000,
transitionPause: 1500,
loop: true,
autoreverse: true,
easingType: "ease-in-out",
onUpdate: (text) =>
(document.getElementById("output-wave").textContent = text),
});
// Inicia as animações
randomScrambler.init();
sequentialScrambler.init();
waveScrambler.init();
});
</script>
</body>
</html>