Sine bouncer

by tnhu

HTML

<section class="stage"><div>Smashing Magazine</div></section>

CSS

*{margin:0;padding:0;font-size:15px;font-family:helvetica,arial,sans-serif}
  footer,section,header{display:block;}
  h1{margin:1em 2em}
  .stage{
    width:200px;
    height:200px;
    margin:2em;
    position:relative;
    background:#6cf;
    overflow:hidden;
  }
  .stage div{
    line-height:40px;
    width:100%;
    text-align:center;
    background:#369;
    color:#fff;
    font-weight:bold;
    position:absolute;
  }

JavaScript

var banner = document.querySelector( '.stage div' ),
    start = 0, val, timeoutId;
function sine() {
  val = 80 * Math.sin( start );
    //if (val < 0) {
      banner.style.top = val + 80 + 'px';
    //}
  start += 0.07;
        
}
timeoutId = window.setInterval( sine, 1000/60 );