History

kritzl d8064d0a64 All checks were successful / build (push) Successful in 13s Details add animations for c3voc assets		2025-11-01 06:27:22 +01:00
..
assets	add animations for c3voc assets	2025-11-01 06:27:22 +01:00
intro.html	add animations for c3voc assets	2025-11-01 06:27:22 +01:00
outro.html	add animations for c3voc assets	2025-11-01 06:27:22 +01:00
pause.html	add animations for c3voc assets	2025-11-01 06:27:22 +01:00
README.md	add animations for c3voc assets	2025-11-01 06:27:22 +01:00
style.css	add animations for c3voc assets	2025-11-01 06:27:22 +01:00
style.css.map	add animations for c3voc assets	2025-11-01 06:27:22 +01:00
style.scss	add animations for c3voc assets	2025-11-01 06:27:22 +01:00

README.md

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:

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:

node ./html5-animation-video-renderer/render.js --video=example_outro.mp4 --url="file:///home/eh22/design/dist/digital/c3voc/outro.html?render"

Pause:

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