Untitled

<html>
   <head>
      <meta charset="UTF-8">
      <title>Parallax Scrolling Demo</title>
      <style>
         body {
            margin: 0;
            padding: 0;
            background-color: #222222;
        }
      </style>
   </head>
    <body>
      <script src="/pixi/bin/pixi-dev.js"></script>
      <script>
    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x66FF99);

    // create a renderer instance.
    var renderer = PIXI.autoDetectRenderer(512, 384);

    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);

            var farTexture = PIXI.Texture.fromImage("resources/bg-far.png");
            far = new PIXI.TilingSprite(farTexture, 512, 256);
            far.position.x = 0;
            far.position.y = 0;
            far.tilePosition.x = 0;
            far.tilePosition.y = 0;
            stage.addChild(far);

            var midTexture = PIXI.Texture.fromImage("resources/bg-mid.png");
            mid = new PIXI.TilingSprite(midTexture, 512, 256);
            mid.position.x = 0;
            mid.position.y = 128;
            mid.tilePosition.x = 0;
            mid.tilePosition.y = 0;
            stage.addChild(mid);

            var playerTexture = PIXI.Texture.fromImage("resources/jet2.png");
            var player = new PIXI.Sprite(playerTexture);
            player.anchor.x = .5;
            player.anchor.y = .5;
            player.position.x = 0;
            player.position.y = 300;
            stage.addChild(player);

            requestAnimFrame(update);


         function update() {
            far.tilePosition.x -= 0.128;
            mid.tilePosition.x -= 0.64;
            player.position.x += 0.7;

            renderer.render(stage);

            requestAnimFrame(update);
         }
      </script>
   </body>
</html>