-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
64 lines (53 loc) · 1.13 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
<!DOCTYPE html>
<html>
<head>
<title>Sloth Test Page</title>
<style>
body {
background: #4AA329;
}
div {
height: 100px;
background: #4AA329;
margin: 10px;
-webkit-transition: all 1s;
-webkit-transform: scale(.7) rotateY(-180deg) translate(300px);
-moz-transition: all 1s;
-moz-transform: scale(.7) rotateY(-180deg) translate(300px);
transition: all 1s;
transform: scale(.7) rotateY(-180deg) translate(300px);
color: #FF9D40;
text-align: center;
font-size: 4em;
line-height: 100px;
border: 3px dashed grey;
}
.color {
background-color: #9FEE00;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
</style>
<script src="sloth.js"></script>
</head>
<body>
<div></div>
<script>
var i = 0,
niceCallback = function(element){
element.className = 'color';
element.textContent = i++;
document.body.insertAdjacentHTML('beforeend', '<div></div>');
sloth({
on: document.querySelector('div:last-child'),
callback: niceCallback
});
};
sloth({
on: document.getElementsByTagName('div'),
callback: niceCallback
});
</script>
</body>
</html>