Tim Pietrusky

Knight Rider ♥ K.I.T.T.

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.

Synchronization: CSS3 animation & HTML5 audio

When I want to sync the animation with the audio, I need to

  • reset the CSS3 animation with JavaScript
  • reset the audio if "play" is clicked
Reset: CSS3 animation

Google: "css animation reset"
First hit is css-tricks.com with the title Restart CSS Animation
css-tricks.com/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 audio

The 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();
});

Result

codepen.io/TimPietrusky/pen/ADwqK

Thanks goes to

Chris Coyier

His JS-TRICK to reset an CSS3 animation @css-tricks.com was a trick for me.
css-tricks.com/restart-css-animation

Lea Verou

She invented the next gen syntax highlight library shit: prismjs (which is used on my website)
prismjs.com

August 2, 2012 | [update] August 3, 2012

Comments