-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
52 lines (51 loc) · 1.87 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
<head>
<meta charset="utf-8"/>
<title>WTVR Expressive text example</title>
</head>
<body>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
}
wtvr-expressive-text {
display : block;
margin: auto;
width: 700px;
max-width : 100%;
margin-top : 2em;
--specialColor : blue;
}
.center{
display:flex;
justify-content: center;
}
</style>
<wtvr-expressive-text auto id="demo-text">
<p>Here is some progressive text using <code><wtvr-expressive-text></code>; its rhythm depends on punctuation.</p>
<p>You can style it using regular css and make it <span class="italic">italic</span>, <span class="big">big</span>, or <span class="small">small</span>, or even <span class="special">special</span>.</p>
<p>You can also make it <span data-letter-effect="wavy">awesome</span>, or you can make it <span data-letter-effect="spooky">spooky</span>, or would you rather have it <span data-letter-effect="wavy-rainbow">fabulous?</span></p>
<p>And you can define dramatic... <span data-pause="0.5"></span> pauses.</p>
<p data-letter-effect="yelling">And it can yell as <span data-speed="0.16" data-letter-effect="yelling">weeeeeeeeeeell</span>!</p>
</wtvr-expressive-text>
<div class="center">
<button id="rush">Rush</button>
</div>
<script type="module">
import { injectStyles } from './wtvr-expressive-text.js';
let additionnalStyles = `
.italic { font-style : italic; }
.big { font-size : 1.3em; }
.small { font-size : 0.7em; }`;
injectStyles(additionnalStyles);
let demoText = document.getElementById("demo-text");
let rushButton = document.getElementById("rush");
rushButton.addEventListener("click", () => {
demoText.rush();
})
demoText.addEventListener("end", (e) => {
rushButton.style.display = "none";
});
</script>
</body>
</html>