[jInvertScroll][1] allows for horizontal scrolling and supports parallax.  

Here's an article on how to [create horizontal parallax scrolling with jInvertScroll][2]


Just use different values for horizon and middle scroll



    <div class="horizon scroll">
      <img src="http://i.imgur.com/IImTBHM.png" alt="Background" />
    </div>
    
    <div class="middle scroll">
      <img src="http://i.imgur.com/e2pwKbv.png" alt="Clouds and Baloons" />
    </div>

**Here's a demo in stack snippets**:

>**Note**: Try viewing in **full page**





    (function($) {
      $.jInvertScroll(['.scroll']);
    }(jQuery));



    html, body {
      padding: 0;
      margin: 0;
      font-family:'Open Sans', sans-serif;
      font-weight: 300;
      font-size: 16px;
      color: #555;
      background: #9fdefd;
    }
    h1, h2 {
      color: #238acb;
    }
    .horizon {
      line-height: 0;
      z-index: 100;
      width: 3000px;
    }
    .middle {
      line-height: 0;
      z-index: 250;
      width: 4500px;
    }
    .front {
      z-index: 500;
      top: 150px;
      width: 6000px;
    }
    .intro {
      position: absolute;
      left: 500px;
      top: 0px;
      padding-right: 50px;
      background: url('http://i.imgur.com/3woqwh2.png') no-repeat right 5px;
    }
    .page {
      position: absolute;  
      top: 0px;
      width: 500px;
      background: white;
      padding: 10px 30px;
      border: 1px #eee solid;

    }
    .panel1 {
      left: 1500px;
    }
    .panel2 {
      left: 2575px;
    }
    .panel3 {
      left: 3800px;
    }
    .panel4 {
      left: 5100px;
    }



    <link href="http://www.pixxelfactory.net/jInvertScroll/css/jInvertScroll.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.jInvertScroll.js"></script>


    <div class="container">

      <div class="horizon scroll">
        <img src="http://i.imgur.com/IImTBHM.png" alt="Background" />
      </div>

      <div class="middle scroll">
        <img src="http://i.imgur.com/e2pwKbv.png" alt="Clouds and Baloons" />
      </div>

      <div class="front scroll">
        <h1 class="intro">Scroll down</h1>

        <div class="panel1 page">
          <h2>The Hot Air Balloon</h2>

        </div>

        <div class="panel2 page">
          <h2>How they work</h2> 

        </div>

        <div class="panel3 page">
          <h2>Practicalities</h2>

        </div>

        <div class="panel4 page">
          <h2>Section 4</h2>

        </div>
      </div>
    </div>



[1]: https://github.com/pixxelfactory/jInvertScroll
[2]: http://www.webdesignermag.co.uk/tutorials/create-horizontal-parallax-scrolling-with-jinvertscroll/

I'm using the latest version of Bootstrap, JQuery, and Skrollr.

I would like to have a static background and a couple scenes that occur as you scroll by parallax scrolling.  I'm able to make scenes as you scroll but I'm looking for a way to where it appears that you are not moving down the page.

I'm looking to make a scene like this image: 

[![example](http://i.imgur.com/LpDDbF9.gif)](http://upload.wikimedia.org/wikipedia/commons/3/34/Parallax_scrolling_example_scene.gif)

Notice how it moves right-left but never appears like you are actually scrolling down the page.

That's the best I can explain it.  Can't seem to find any good tutorials to accomplish this.  Any help in the right direction would be outstanding.
