JSFiddle - React, Tailwind, and code Playground
by Rikin Patel
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-2.1.4.min.js"></script>
</head>
<script>
var clock = function(selectorhour, selectormin, duration, deg){
$(selectorhour).animate({ borderSpacing: deg }, {
step: function(now,fx) {
var hourdeg = 'rotate('+now+'deg)';
$(this).css('-webkit-transform', hourdeg);
$(this).css('-moz-transform',hourdeg);
$(this).css('-ms-transform',hourdeg);
$(this).css('transform',hourdeg);
var minele = $(selectormin);
var minnow = now/12;
var mindeg = 'rotate('+minnow+'deg)';
minele.css('-webkit-transform',mindeg);
minele.css('-moz-transform',mindeg);
minele.css('-ms-transform',mindeg);
minele.css('transform',mindeg);
},
duration:duration,
complete: function() {
}},'linear');
};
function allClockAnimate()
{
clock('#hour1', '#min1', 2000, 4320);
clock('#hour2', '#min2', 4000, 1080);
clock('#hour3', '#min3', 6000,2160);
clock('#hour4', '#min4', 8000,3240);
clock('#hour5', '#min5', 10000, 1440);
setTimeout(function(){lineAnimate();},500)
}
function lineAnimate()
{
$('.linebar1').animate({ height: 60 },
{
duration: 1000,
complete: function() {
$('.linebar2').animate({ height: 135 },
{
duration: 1200,
complete: function() {
$('.linebar3').animate({ height: 45 },
{
duration: 1200,
complete: function() {
$('.linebar4').animate({ height: 80 },
{
duration: 1300,
complete: function() {
$('.linebar5').animate({ height: 50 },
{
duration: 1400,
complete: function() {
$('.linebar6').animate({ height: 150 },
{
duration: 1500,
complete: function() {
}
});...