The Pendulum

by beau

HTML

<ul class="swinger">
    <li class="no1">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no2">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no3">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no4">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no5">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no6">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no7">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no8">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no9">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no10">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no11">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no12">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no13">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no14">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
    <li class="no15">
        <span class="string"></span>
        <span class="ball"></span>
    </li>
</ul>

CSS

.swinger {
    width: 1px;
    height: 0px;
    margin: 0 auto;
}

li {
    position: relative;
    top: 0px;
    left: 0px;
    width: 1px;
    height: 1px;
    -moz-animation: swing alternate infinite ease-in-out;
    -webkit-animation: swing alternate infinite ease-in-out;
}

.string {
    display: block;
    width: 1px;
    background-color: #888;
}

.ball {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 30px;
    background-color: #e0e0e0;
    border: 1px solid #c8c8c8;
    content: ' ';
    position: relative;
}

@-moz-keyframes swing {
  from {
    -webkit-transform: rotate(-25deg);
  }
  to {
    -webkit-transform: rotate(25deg);
  }
}

@-webkit-keyframes swing {
  from {
    -webkit-transform: rotate(-25deg);
  }
  to {
    -webkit-transform: rotate(25deg);
  }
}

JavaScript

var height = [20.5, 21.8, 23.2, 24.8, 26.6, 28.5, 30.6, 33.0, 35.7,
 38.1, 41.6, 45.6, 50.1, 55.2, 60.9];

$("li").each(function(index) {
    var timeFunc = (2 * Math.PI) * (Math.sqrt(height[index] / 9.8)) / 10;

    $(".string", this).height(height[index] * 10);
    $(".ball", this)
        .height(height[index])
        .width(height[index])
        .css('left', (-1/2)*height[index]);
    $(this).attr("style", "-moz-animation-duration: " + timeFunc + "s");
    $(this).attr("style", "-webkit-animation-duration: " + timeFunc + "s");
});