@abikebuk/digitalization
Version:
Text animation themed on glitched/digital text.
115 lines (107 loc) • 5.43 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8">
<title>Digitalize Test HTML Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="main">
<div id="a"></div>
<div class="wrapper">
<div class="vertical-bar"></div>
<div id="b"></div>
<div class="vertical-bar"></div>
</div>
<div class="wrapper">
<div class="vertical-bar"></div>
<div id="c"></div>
<div class="vertical-bar"></div>
</div>
<div class="wrapper">
<div class="vertical-bar"></div>
<div id="d"></div>
<div class="vertical-bar"></div>
</div>
<div id="e"></div>
<br>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
<div id="i"></div>
</div>
</div>
</div>
<script type="module">
import { digitalizeLinear, digitalizeCountdown, digitalizeCountdownRight, digitalizeLinearFull} from "../digitalize.js";
import { sleep } from "../utils.js";
async function digitalizeAll(speed, nb_iteration) {
const a = document.getElementById('a');
const b = document.getElementById('b');
const c = document.getElementById('c');
const d = document.getElementById('d');
const e = document.getElementById('e');
b.className = "";
c.className = "";
d.className = "";
const blankChar = '•';
clearContent(blankChar, a, b, c, d, e);
await sleep (500);
await digitalizeBox(speed, nb_iteration, blankChar, a, e);
await sleep(1000);
await digitalizeContent(speed, nb_iteration, blankChar, b, c, d);
b.className = "colorChange";
c.className = "colorChange";
d.className = "colorChange";
}
function digitalizeBox(speed, nb_iteration, blankChar, a, e){
const verticals = document.getElementsByClassName('vertical-bar');
digitalizeLinear(a, '╔════════╗', speed / 1.2, nb_iteration / 1.2, false, blankChar);
digitalizeLinear(e, '╚════════╝', speed / 1.2, nb_iteration / 1.2, false, blankChar);
for(let i = 0; i < verticals.length; i++){
const v = verticals.item(i);
digitalizeLinearFull(v, '║', speed, nb_iteration * i + 5);
}
}
function clearContent(char, a, b, c, d ,e){
const verticals = document.getElementsByClassName('vertical-bar');
for(let i = 0; i < verticals.length; i++)
verticals.item(i).innerHTML = char;
a.innerHTML = char + char + char + char + char + char + char + char + char + char ;
b.innerHTML = char + char + char + char + char + char + char + char;
c.innerHTML = char + char + char + char + char + char + char + char;
d.innerHTML = char + char + char + char + char + char + char + char;
e.innerHTML = char + char + char + char + char + char + char + char + char + char ;
}
async function digitalizeContent(speed, nb_iteration, blankChar, b, c, d){
await digitalizeLinear(b, 'DIGITAL_', speed, nb_iteration, false, blankChar, '/\\-')
await digitalizeCountdown(c, '_IZATION', speed * (nb_iteration + 1), blankChar);
await digitalizeLinear(d, '•SCRIPT•', speed, nb_iteration, true, blankChar);
await sleep(1500);
digitalizeLinearFull(b, 'DIGITAL_', speed, nb_iteration / 7, false, blankChar);
digitalizeLinearFull(c, '_IZATION', speed * 1.25, nb_iteration / 7, false, blankChar);
digitalizeLinearFull(d, '•SCRIPT•', speed * 1.5, nb_iteration / 7, true, blankChar);
}
/** The actual execution */
digitalizeAll(35,5);
document.getElementById('main').onclick = async function () {
return digitalizeAll(35,5);
}
const f = document.getElementById('f');
const g = document.getElementById('g');
const h = document.getElementById('h');
const i = document.getElementById('i');
digitalizeLinear(f, 'Abikebuk.\'s.Testing.Process', 8, 20, false, '?');
digitalizeLinearFull(g, 'Abikebuk.\'s.Testing.Process', 8, 20, false);
digitalizeCountdown(h, 'Abikebuk.\'s.Testing.Process', 9*20,'?');
digitalizeCountdownRight(i, 'Abikebuk.\'s.Testing.Process', 9*20,'?')
</script>
<script src="../digitalize.js" type="module"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>