CodePen

HTML

            
              <div class="panel">
    <img id="bg" src="http://s.cdpn.io/16327/skyline.jpg" width="760" height="225">
    <img id="logo" src="http://s.cdpn.io/16327/jf-logo.png" width="250" height="216">
    <div id="address">580 Lipsenard St. New York NY 10012</div>
</div>
<div id="content">
<h1>The Jive Factory</h1>
<p>The Jive Factory is a restaurant and venue in Lower Manhattan, dedicated to the best food and music the city has to offer. Stop in for dinner, stick around for a drink, and see the greatest up-and-coming acts in a small and friendly performance space.</p>

<p>We have a dining room and a full bar on the ground floor, and a large concert space downstairs with a stage, open standing room, and a second bar in the back.</p>
</div>

            
          
!
via HTML Inspector

CSS

            
              body {
    background: #000 url(http://s.cdpn.io/16327/bg-body.jpg) repeat-x;
    color: #eee;
}

.panel {
    position: relative;
    width: 760px;
    height: 224px;
    background: #000;
    margin: 20px auto 0;
    overflow: hidden;
}

#bg {
    position: absolute;
}

#logo {
    position: absolute;
    left: 20px;
    top: 5px;
}

#address {
    position: absolute;
    left: 483px;
    top: 184px;
    color: #fcb802;
    width: 300px;
}

#content {
    position: relative;
    width: 720px;
    padding: 20px;
    background: #222;
    margin: 0 auto;
    overflow: hidden;
}

h1 {
    margin: 0;
}

p {
    color: #ccc;
}


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              CSSPlugin.defaultTransformPerspective = 800;

var tl = new TimelineLite();

tl.from("#bg", 0.5, {opacity:0})
  .from("#logo", 0.5, {left:-250, rotation:-90, scale:0, ease:Back.easeOut})
  .from("#address", 0.5, {left:"+=100", opacity:0, ease:Back.easeOut})
  .from("#content", 0.5, {opacity:0, rotationX:-90, transformOrigin:"50% 50% -200"});


            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................