How to do horizontal parallax scrolling

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:

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.

jInvertScroll allows for horizontal scrolling and supports parallax.

Here's an article on how to create horizontal parallax scrolling with jInvertScroll

Just use different values for horizon and middle scroll

<!-- language: lang-html -->

<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

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

(function($) {
  $.jInvertScroll(['.scroll']);
}(jQuery));

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->