Sine bouncer

by codepo8

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;
function sine(){
  banner.style.top = 50 * Math.sin( start ) + 80 + 'px';
  start += 0.05;
}
window.setInterval( sine, 1000/30 );