可乐，走你~

dabblet.css

*{
      margin: 0;
      padding: 0;
    }
    .coke {
      width: 600px;
      height: 400px;
      overflow: auto;
    }

    .coke .stage {
      background: url(http://www.romancortes.com/ficheros/coke-scroll.png) no-repeat;
      background-position: 0 0;
      padding-left: 400px;
      width: 800px;
    }
    .coke .stage:after{
      content: '\0020';
      height:0px;
      display: block;
      clear: both;
    }

    .coke .stage .coke-body {
      float: left;
      margin-top:0px;
      height: 336px;
      background: url(http://www.romancortes.com/ficheros/coke-label.jpg) 0 11px repeat-x;
      background-attachment: fixed;
      width: 194px;
    }

    .coke .stage .coke-edge {
      display: inline-block;
      height: 336px;
      float: left;
      margin-left: -194px;
      width: 194px;
      background: url(http://www.romancortes.com/ficheros/coke-can.png) no-repeat;
    }

dabblet.html

<div class="coke">
  <div class="stage">
    <p class="coke-body"></p>
    <p class="coke-edge"></p>
  </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}