27 lines
No EOL
1.3 KiB
Markdown
27 lines
No EOL
1.3 KiB
Markdown
# c3VOC animations
|
|
|
|
We use the HTML5 Animation Video Renderer (https://github.com/dtinth/html5-animation-video-renderer) to render frame-accurate animations built with HTML, CSS, and JavaScript.
|
|
|
|
To render an animation clone the html5-animation-video-renderer repository and run one of the following commands:
|
|
(We assume that you are in the parent directory of the cloned repository and that the design repository is in `/home/eh22/design`. Adjust your code accordingly.)
|
|
|
|
Example Intro:
|
|
```shell
|
|
node ./html5-animation-video-renderer/render.js --video=example_intro.mp4 --url="file:///home/eh22/design/dist/digital/c3voc/intro.html?render&title=Bahn APIs - Wer hat mehr chaos, wir oder die?&speaker=marudor"
|
|
```
|
|
|
|
Outro:
|
|
```shell
|
|
node ./html5-animation-video-renderer/render.js --video=example_outro.mp4 --url="file:///home/eh22/design/dist/digital/c3voc/outro.html?render"
|
|
```
|
|
|
|
Pause:
|
|
```shell
|
|
node ./html5-animation-video-renderer/render.js --video=example_outro.mp4 --url="file:///home/eh22/design/dist/digital/c3voc/pause.html?render"
|
|
```
|
|
|
|
To watch the animation in your browser just open the file without the `?render` at the end.
|
|
Please note, that some styles are only rendered correctly in Chromium :c
|
|
|
|
Example URL for the pause animation:
|
|
`file:///home/eh22/design/dist/digital/c3voc/pause.html` |