Как сделать горизонтальную прокрутку параллакса

Question

Я использую последнюю версию Bootstrap, JQuery и Skrollr.

Я хотел бы иметь статический фон и пару сцен, которые происходят при прокрутке по прокрутке параллакса. Я могу делать сцены, когда вы прокручиваете, но я ищу способ, чтобы показать, что вы не перемещаетесь по странице.

Я ищу, чтобы сделать сцену, как это изображение:

Обратите внимание, как он движется вправо-влево, но не появляется, как вы на самом деле прокрутки вниз страницы.

Это лучшее, что я могу объяснить. Кажется, вы не найдете хороших учебников для этого. Любая помощь в правильном направлении будет выдающейся.

Answer 1

Как уже упоминалось в комментариях, горизонтальная прокрутка не поддерживается skrollr, но вы можете сделать что-то другое:

Вы можете использовать вертикальную полосу прокрутки для анимации элементов в горизонтальном направлении.

Вот сообщение о переполнении стека на Horizontal scrolling effect with Skrollr
А вот рабочая демо в jsFiddle from that post

Надежда это получает вы собираетесь.

Answer 2

jInvertScroll позволяет горизонтальной прокрутки и поддерживает параллакса.

Вот статья о том, как create horizontal parallax scrolling with jInvertScroll

Просто используйте разные значения для горизонта и среднего свитка

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

Вот демо в стеке фрагментах:

Примечание: Попробуйте просмотреть в на странице

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