Skip to content

Commit 91c0863

Browse files
zenorochazenorocha
committed
creating a new example that plays with css filters
1 parent b34bc6a commit 91c0863

1 file changed

Lines changed: 107 additions & 0 deletions

File tree

‎examples/css_filter.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
5+
<title>tracking.js - hello world</title>
6+
7+
<meta charset="utf-8">
8+
9+
<script src="../src/tracking.js"></script>
10+
<script src="../src/tracker/color.js"></script>
11+
12+
<style>
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
canvas {
18+
-moz-transform: scale(-1, 1);
19+
-o-transform: scale(-1, 1);
20+
-webkit-transform: scale(-1, 1);
21+
filter: FlipH;
22+
transform: scale(-1, 1);
23+
top: 0;
24+
left: 0;
25+
width: 100%;
26+
height: 100%;
27+
position: absolute;
28+
}
29+
.hue {
30+
-webkit-filter: hue-rotate(328deg);
31+
-webkit-animation: hue 3s infinite;
32+
-moz-animation: hue 3s infinite;
33+
-o-animation: hue 3s infinite;
34+
animation: hue 3s infinite;
35+
}
36+
@-webkit-keyframes hue {
37+
0% { -webkit-filter: hue-rotate(1deg); }
38+
100% { -webkit-filter: hue-rotate(359deg); }
39+
}
40+
@-moz-keyframes hue {
41+
0% { -webkit-filter: hue-rotate(1deg); }
42+
100% { -webkit-filter: hue-rotate(359deg); }
43+
}
44+
@-o-keyframes hue {
45+
0% { -webkit-filter: hue-rotate(1deg); }
46+
100% { -webkit-filter: hue-rotate(359deg); }
47+
}
48+
@keyframes hue {
49+
0% { -webkit-filter: hue-rotate(1deg); }
50+
100% { -webkit-filter: hue-rotate(359deg); }
51+
}
52+
.invert{
53+
-webkit-filter: invert(1);
54+
-webkit-animation: invert 3s infinite;
55+
-moz-animation: invert 3s infinite;
56+
-o-animation: invert 3s infinite;
57+
animation: invert 3s infinite;
58+
}
59+
@-webkit-keyframes invert {
60+
0% , 100% { -webkit-filter: invert(0); }
61+
50% { -webkit-filter: invert(1); }
62+
}
63+
@-moz-keyframes hue {
64+
0%, 100% { -webkit-filter: invert(0); }
65+
50% { -webkit-filter: invert(1); }
66+
}
67+
@-o-keyframes hue {
68+
0% , 100% { -webkit-filter: invert(0); }
69+
50% { -webkit-filter: invert(1); }
70+
}
71+
@keyframes hue {
72+
0% , 100% { -webkit-filter: invert(0); }
73+
50% { -webkit-filter: invert(1); }
74+
}
75+
</style>
76+
77+
</head>
78+
<body>
79+
80+
<script>
81+
var videoCamera = new tracking.VideoCamera().hide().render().renderVideoCanvas();
82+
83+
var t1 = videoCamera.track({
84+
type: 'color',
85+
color: 'magenta',
86+
onFound: function(track) {
87+
document.querySelector('canvas').classList.add('hue');
88+
},
89+
onNotFound: function() {
90+
document.querySelector('canvas').classList.remove('hue');
91+
}
92+
});
93+
94+
var t2 = videoCamera.track({
95+
type: 'color',
96+
color: 'cyan',
97+
onFound: function(track) {
98+
document.querySelector('canvas').classList.add('invert');
99+
},
100+
onNotFound: function() {
101+
document.querySelector('canvas').classList.remove('invert');
102+
}
103+
});
104+
</script>
105+
106+
</body>
107+
</html>

0 commit comments

Comments
 (0)