-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (68 loc) · 2.85 KB
/
index.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<head>
<title>Dice.js</title>
<link rel="stylesheet" href="main.css" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- jQuery v1.12.0 -->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<!-- Bootstrap v3.3.6 -->
<script src="https://freginold.github.io/fontSwitcher/fontSwitcher.min.js"></script>
<!-- fontSwitcher v3.0 -->
<script src="dice.js" type="text/javascript"></script>
<!-- Dice v1.0 -->
</head>
<body>
<h2 class='ctr'><span class='headerSpan'>Some of the things you can do with <img id="diceImg" src="dice.PNG" /></span></h2>
<div id='curveDiv' >Curve text any way you want</div>
<div id='fadeDiv'>Fade text in or out or both</div>
<div id='sizeDiv'>Have fun with text sizes</div>
<div id='colorsDiv'>Alternate fonts and colors</div>
<div id='staggerDiv'>Stagger text</div>
<script>
// ------------- alternate colors -------------
dice(document.getElementById('colorsDiv'), {id: false, even: "evenColorClass", odd: "oddColorClass"});
// ------------- change text sizes -------------
dice(document.getElementById('sizeDiv'), {id: false, all: 'sized'});
var size = 0.4;
var sizeSpans = document.getElementsByClassName('sized');
for (var i = 0; i < sizeSpans.length; i++) {
if (i === 0) { sizeSpans[i].style.fontSize = "" + (size + (4 / .4)) + "em"; }
sizeSpans[i].style.fontSize = "" + (size + (4 / (i/2))) + "em";
}
// ------------- curve text -------------
dice(document.getElementById('curveDiv'), {id: "curved", all: "curved", skip: ""});
var curvedSpans = document.getElementsByClassName('curved');
for (var j = 0; j < curvedSpans.length; j++) {
curvedSpans[j].style.transform = "rotate(" + curvedSpans[j].id.charAt(curvedSpans[j].id.length - 1) + "0deg)";
}
// ------------- fade text -------------
var fadeOptions = {
id: false,
all: "fade",
skip: " "
};
dice(document.getElementById('fadeDiv'), fadeOptions);
var fadeSpans = document.getElementsByClassName('fade');
var plus = false;
var opac = 0.15;
for (var k = 0; k < fadeSpans.length; k++) {
if (plus) {
opac = opac - 0.07;
}
else {
opac = opac + 0.07;
}
fadeSpans[k].style.opacity = opac;
if (fadeSpans[k].style.opacity > 0.95) { plus = true; }
}
// ------------- stagger text -------------
dice(document.getElementById('staggerDiv'), {all: 'staggered'});
var staggeredSpans = document.getElementsByClassName('staggered');
var ht = 0;
for (var l = 0; l < staggeredSpans.length; l++) {
if (l < staggeredSpans.length / 2) { ht = ht + 5; }
else { ht = ht - 5; }
staggeredSpans[l].style.bottom = ht + "%";
}
</script>
</body>