My version of the awesome K.I.T.T. scanner light from the series Knight Rider.
Just some CSS3 and HTML5 audio (+SVG for the playback-button). So I will only show you how to keep everything in sync.
When I want to sync the animation with the audio, I need to
Google: "css animation reset"css-tricks.com/restart-css-animation
First hit is css-tricks.com with the title Restart CSS Animation
This is exactly what I want. It will clone my .knight-rider parent element, place it after the active element and remove the active element from the page. And you need jQuery to use this snippet.
var element = $(".knight-rider"),
clone_warrior = element.clone(true);
element.before(clone_warrior);
$("." + el.attr("class") + ":last").remove();
What's happening? If you clone the element and add it to the DOM, it's CSS3 animation is called the first time (because the element is an animation-virgin).
Reset: HTML5 audioThe only thing to do is to set the current time to the beginning:
$("button").click(function() {
// "Reset CSS3 animation" code goes here
var audio = $("audio").get(0);
// Reset time
audio.currentTime = 0;
audio.play();
});
codepen.io/TimPietrusky/pen/ADwqK
His JS-TRICK to reset an CSS3 animation @css-tricks.com was a trick for me.
css-tricks.com/restart-css-animation
She invented the next gen syntax highlight library shit: prismjs (which is used on my website)
prismjs.com