EverWeb Widgets HTML5

Animated Audio Turntable

disc play
disc play
Replay

HTML5

This animation uses an HTML5 figure element which is given a background color and a contrasting border to form the base.
The disc is an image which is inserted into the main figure.
Next comes another figure element containing the image of the tone arm.
This is followed by a figcaption that forms the "Replay" button. The button is a hyperlink which, when clicked, reloads the page to start the animation again.
The basic HTML looks like this…

<figure>
<img id="disc" href="disc.png" alt="disc" />
<figure>
<img id="tone-arm" href="tone-arm.png" alt="arm" />
</figure>
<figcaption>
<a href="page-name.html">Replay</a>
</figcaption>
</figure>

CSS

<style type="text/css">
#disc {
-moz-animation:rotate 4s linear 0s 20;
-webkit-animation:rotate 4s linear 0 20;
animation:rotate 4s linear 0 20;
width:100%;
height:auto;
margin:0;
padding:0;
border:none
} @-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg)}
to {-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg)}
to {-moz-transform: rotate(360deg)}
}
@keyframes rotate {
from {transform: rotate(0deg)}
to {transform: rotate(360deg)}
}

#arm{
-webkit-animation:swing 75s linear 0 1;
-moz-animation:swing 75s linear 0s 1;
animation:swing 75s linear 0 1;
-webkit-transform-origin: 18% 20%;
-moz-transform-origin: 18% 20%;
transform-origin: 18% 20%;
}
@-webkit-keyframes swing {
from {-webkit-transform: rotate(5deg)}
to {-webkit-transform: rotate(35deg)}
}
@-moz-keyframes swing {
from {-moz-transform: rotate(5deg)}
to {-moz-transform: rotate(35deg)}
}
@keyframes swing { from {transform: rotate(5deg)} to {transform: rotate(35deg)}
}
</style>

Audio Player

Audio MP3 Button Player

The audio uses the MP3 Button Player which has a checkbox for Autoplay.
The player is then sent to the back using the Arrange menu and "hidden" behing the turntable.

Animation

The animation CSS is shown to the left.
The disc image has been given an id="disc"
This has been given and animation "rotate". The rotation is created using keyframes like this…

@keyframes rotate {
from {transform: rotate(0deg)}
to {transform: rotate(360deg)}

This causes the disc image to rotate through 360º.
The animation timing is controlled by this line…
animation:rotate 4s linear 0 20;

Here the "rotate" is specified, the time for one complete rotation is 4 seconds and the number of rotations is 20. This means that the disc image will rotate through 360º for 80 seconds and then stop.

The tone arm image has been given an id="arm"
This has been given and animation "swing". This time the image only has to swing through an arc which is created using keyframes like this…
@keyframes swing {
from {transform: rotate(5deg)}
to {transform: rotate(35deg)}

The timing is controlled using this…
animation:swing 75s linear 0 1;

… where the arm travels across the disc in 75 seconds, once and then returns to its original position.

To get the arm to pivot on a point along its length, this is used…
transform-origin: 18% 20%; }

The first value is the distance from the top of the image and the second is from the left. These values are expressed as a percentage but could also use pixels for more precision.

Timing

The duration of the audio track is 75 seconds which is the value for the swing animation.

The turntable rotates for 80 seconds - 20 rotations of 4 seconds each.

Note that the audio will not autoplay on an iPad since iOS doesn't support this function.