Skip to content

Commit 87cc17c

Browse files
gridwalkgridwalk
committed
Add examples and video element support
1 parent a833002 commit 87cc17c

File tree

15 files changed

+770
-490
lines changed

15 files changed

+770
-490
lines changed

example/codeKeyframes.css renamed to dist/codeKeyframes.css

File renamed without changes.

example/codeKeyframes.js renamed to dist/codeKeyframes.js

File renamed without changes.

example/codeKeyframes.min.js renamed to dist/codeKeyframes.min.js

File renamed without changes.

‎dist/examples/example-basic/index.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<html>
2+
3+
<head>
4+
<title>Code Keyframes Basic Example</title>
5+
<link rel="stylesheet" href="/codeKeyframes.css">
6+
7+
<style>
8+
body{
9+
background-color: #000;
10+
}
11+
main{
12+
width: 100%;
13+
height: 100%;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
}
19+
.square{
20+
width: 50vw;
21+
height: 50vw;
22+
background-color: chartreuse;
23+
transition:.2s all;
24+
}
25+
</style>
26+
27+
</head>
28+
29+
<body>
30+
31+
<main>
32+
<div class="square"></div>
33+
</main>
34+
35+
<script>
36+
37+
// helpers used in the demo
38+
39+
_square = document.querySelector('.square')
40+
41+
var r = function(max){
42+
return Math.floor(Math.random()*max)
43+
}
44+
45+
</script>
46+
47+
48+
<!-- Required inclusion of codekeyframes -->
49+
<script src='/codeKeyframes.js'></script>
50+
51+
<!-- CKF Initialization -->
52+
<script>
53+
var ckf = new CodeKeyframes({
54+
55+
audioPath: './jetski-b-d0n.xyz.mp3',
56+
editorOpen: true,
57+
waveColor: 'white',
58+
progressColor: 'chartreuse',
59+
bgColor: '#222',
60+
label: 'CodeKeyframes Basic Demo by d0n.xyz',
61+
autoplay: false,
62+
63+
// each value in state generates a variable you can easily change in the editor
64+
// variables can be accessed elsewhere in your code like ckf.state.varName
65+
state: {
66+
// pyramidGroupScale: 1,
67+
// pyramidXOffset: 0
68+
},
69+
70+
// no need to edit keyframes by hand. When you click "Export Keyframes" in the editor,
71+
// you will paste the result into this variable
72+
keyframes: [{"start":"6.15","end":"6.25","data":{"code":"_square.style.transform = `rotate(${ r(360) }deg)`"}},{"start":"9.22","end":"9.32","data":{"code":"_square.style.transform = `rotate(${ r(360) }deg)`"}},{"start":"12.21","end":"12.31","data":{"code":"_square.style.transform = `rotate(${ r(360) }deg)`"}},{"start":"15.21","end":"15.31","data":{"code":"_square.style.transform = `rotate(${ r(360) }deg)`"}},{"start":"18.14","end":"18.24","data":{"code":"_square.style.transform = `rotateX(${ r(180) }deg) rotatey(${ r(180) }deg)`"}},{"start":"20.82","end":"20.92","data":{"code":"_square.style.transform = `rotateX(${ r(180) }deg) rotateY(${ r(180) }deg)`"}},{"start":"23.82","end":"23.92","data":{"code":"_square.style.transform = `rotateX(${ r(180) }deg) rotatey(${ r(180) }deg)`"}},{"start":"26.78","end":"26.88","data":{"code":"_square.style.transform = `rotateX(${ r(180) }deg) rotatey(${ r(180) }deg)`"}},{"start":"29.80","end":"29.90","data":{"code":"_square.style.transform = `rotateX(${ r(180) }deg) rotatey(${ r(180) }deg)`"}},{"start":"32.81","end":"32.91","data":{"code":"_square.style.transform = `rotateX(${ r(180) }deg) rotatey(${ r(180) }deg)`"}},{"start":"35.81","end":"35.91","data":{"code":"_square.style.transform = `rotateX(${ r(180) }deg) rotatey(${ r(180) }deg)`"}},{"start":"38.78","end":"38.88","data":{"code":"_square.style.transform = `rotateX(${ r(180) }deg) rotatey(${ r(180) }deg)`"}},{"start":"41.83","end":"41.93","data":{"code":"_square.style.transform = `rotateX(${ r(180) }deg) rotatey(${ r(180) }deg)`"}},{"start":"44.84","end":"44.94","data":{"code":"_square.style.transform = `rotateX(${ r(180) }deg) rotatey(${ r(180) }deg)`"}},{"start":"47.76","end":"47.86","data":{"code":"_square.style.transform = ``\n\n_square.style.backgroundColor = `chartreuse`"}},{"start":"25.29","end":"25.39","data":{"code":"_square.style.backgroundColor = `white`"}},{"start":"28.32","end":"28.42","data":{"code":"_square.style.backgroundColor = `chartreuse`"}},{"start":"31.33","end":"31.43","data":{"code":"_square.style.backgroundColor = `white`"}},{"start":"34.31","end":"34.41","data":{"code":"_square.style.backgroundColor = `cyan`"}},{"start":"37.31","end":"37.41","data":{"code":"_square.style.backgroundColor = `white`"}},{"start":"40.31","end":"40.41","data":{"code":"_square.style.backgroundColor = `blue`"}},{"start":"43.31","end":"43.41","data":{"code":"_square.style.backgroundColor = `white`"}},{"start":"46.31","end":"46.41","data":{"code":"_square.style.backgroundColor = `hotpink`"}}],
73+
74+
onCanPlay: function(){
75+
// audio loaded and ready to play
76+
console.log('onCanPlay triggered')
77+
},
78+
79+
onPlay: function(){
80+
console.log('onPlay triggered')
81+
},
82+
83+
onPause: function(){
84+
console.log('onPause triggered')
85+
},
86+
87+
onFrame: function(){
88+
console.log('onFrame triggered, do/render something')
89+
}
90+
})
91+
</script>
92+
93+
</body>
94+
</html>

‎dist/examples/example-basic/jetski-b-d0n.xyz.mp3‎

1.48 MB
Binary file not shown.

‎dist/examples/example-education/art.jpg‎

36.2 KB
Loading

‎dist/examples/example-education/edu-example.mp4‎

16.5 MB
Binary file not shown.

‎dist/examples/example-education/index.html‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<html>
2+
3+
<head>
4+
<title>Code Keyframes Education Example</title>
5+
<link rel="stylesheet" href="/codeKeyframes.css">
6+
7+
<style>
8+
9+
/* these styles are just for the example */
10+
body{
11+
background-color: #000;
12+
overflow: hidden;
13+
color:#fff;
14+
font-family: monospace;
15+
}
16+
17+
.example{
18+
position: fixed;
19+
width: 50%;
20+
top: 10px;
21+
left:10px;
22+
font-size: 22px;
23+
z-index: 2;
24+
25+
}
26+
27+
.double{
28+
width: 100%;
29+
display: flex;
30+
height: 100%;
31+
}
32+
33+
.double>*{
34+
width:50%;
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
}
39+
40+
video{
41+
width: 100%;
42+
}
43+
44+
.edu-content{
45+
display: flex;
46+
align-items: center;
47+
justify-content: center;
48+
flex-direction: column;
49+
}
50+
51+
.edu-content>*{
52+
max-width: 100%;
53+
}
54+
55+
textarea{
56+
width: 100%;
57+
height: 100%;
58+
}
59+
60+
iframe{
61+
width: 100%;
62+
height: 100%;
63+
background-color: #fff;
64+
}
65+
66+
a{
67+
color:#fc0;
68+
}
69+
70+
</style>
71+
</head>
72+
73+
<body>
74+
75+
<div class="example">Press space to toggle playback</div>
76+
77+
<main class="double">
78+
<video class='main-video' src='./edu-example.mp4'></video>
79+
<div class="edu-content">
80+
Content appears here
81+
</div>
82+
</main>
83+
84+
<script>
85+
86+
87+
</script>
88+
89+
<!-- Required inclusion of codekeyframes -->
90+
<script src='/codeKeyframes.js'></script>
91+
92+
<!-- CKF Initialization -->
93+
<script>
94+
var ckf = new CodeKeyframes({
95+
96+
videoElement: document.querySelector('.main-video'),
97+
editorOpen: true,
98+
waveColor: '#3AEAD2',
99+
progressColor: '#0c9fa7',
100+
bgColor: '#222',
101+
label: 'CodeKeyframes Education Demo by d0n.xyz',
102+
autoplay: true,
103+
104+
// no need to edit keyframes by hand. When you click "Export Keyframes" in the editor,
105+
// you will paste the result into this variable
106+
keyframes: [{"start":"7.96","end":"8.06","data":{"code":"document.querySelector('.edu-content').innerHTML = '<img src=\"./art.jpg\">'"}},{"start":"13.02","end":"13.12","data":{"code":"document.querySelector('.edu-content').innerHTML = `<textarea><!DOCTYPE html>\n<html>\n<head>\n<title>Page Title</title>\n</head>\n<body>\n\n<h1>My First Heading</h1>\n<p>My first paragraph.</p>\n\n</body>\n</html>\n</textarea>`"}},{"start":"17.86","end":"17.96","data":{"code":"document.querySelector('.edu-content').innerHTML = `<textarea><!DOCTYPE html>\n<html>\n<head>\n<title>Page Title</title>\n</head>\n<body>\n\n<h1>My First Heading</h1>\n<p>My first paragraph.</p>\n\n<div class='some-class'>This part is new</div>\n\n</body>\n</html>\n</textarea>`"}},{"start":"19.80","end":"19.90","data":{"code":"document.querySelector('.edu-content textarea').focus()\ndocument.querySelector('.edu-content textarea').setSelectionRange(126, 173);"}},{"start":"26.37","end":"26.47","data":{"code":"document.querySelector('.edu-content').innerHTML = `<iframe src='https://wwwwwwwww.jodi.org/'></iframe>` "}},{"start":"37.14","end":"37.24","data":{"code":"document.querySelector('.edu-content').innerHTML = `<textarea><!DOCTYPE html>\n<html>\n<head>\n<title>Page Title</title>\n</head>\n<body>\n\n<h1>My First Heading</h1>\n<p>My first paragraph.</p>\n\n<div class='some-class'>This part is new</div>\n\n</body>\n</html>\n</textarea><iframe></iframe>`\n\nvar htmlContent = document.querySelector('textarea').value\n\ndocument.querySelector('iframe').setAttribute('srcDoc',htmlContent)"}},{"start":"45.37","end":"45.47","data":{"code":"document.querySelector('.edu-content').innerHTML = ''"}},{"start":"47.90","end":"48.00","data":{"code":"document.querySelector('main').classList.remove('double')"}},{"start":"73.64","end":"73.74","data":{"code":"document.querySelector('main').classList.add('double')"}},{"start":"75.18","end":"75.28","data":{"code":"document.querySelector('.edu-content').innerHTML = '<a href=\"https://github.com/gridwalk/codekeyframes\">Code Keyframes on GitHub</a>'"}},{"start":"101.57","end":"101.67","data":{"code":"document.querySelector('.edu-content').innerHTML = 'Thanks! <a href=\"https://d0n.xyz\">d0n.xyz</a>'"}}],
107+
108+
onCanPlay: function(){
109+
// alert('can play')
110+
console.log('onCanPlay triggered')
111+
},
112+
113+
onPlay: function(){
114+
console.log('onPlay triggered')
115+
},
116+
117+
onPause: function(){
118+
console.log('onPause triggered')
119+
},
120+
121+
onFrame: function(){
122+
console.log('onFrame triggered, do/render something')
123+
124+
}
125+
})
126+
</script>
127+
128+
</body>
129+
</html>

example/audio/KIYOKO.mp3 renamed to dist/examples/example-threejs/audio/KIYOKO.mp3

File renamed without changes.

example/index.html renamed to dist/examples/example-threejs/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<html>
22

33
<head>
4-
<title>Code Keyframes Example</title>
5-
<link rel="stylesheet" href="codeKeyframes.css">
4+
<title>Code Keyframes Three JS Example</title>
5+
<link rel="stylesheet" href="/codeKeyframes.css">
66

77
<style>
88

@@ -76,7 +76,7 @@
7676
</script>
7777

7878
<!-- Required inclusion of codekeyframes -->
79-
<script src='codeKeyframes.js'></script>
79+
<script src='/codeKeyframes.js'></script>
8080

8181
<!-- CKF Initialization -->
8282
<script>

0 commit comments

Comments
 (0)