Горизонтальный параллакс на сенсорных устройствах

Мне нужна горизонтальная прокрутка параллакса для работы на сенсорных устройствах. Я делаю игру, где вы сможете прокручивать только боком. Мне нужно несколько уровней (по крайней мере три), которые будут двигаться в разных направлениях. Я пробовал пару плагинов (jInvertScroll и Stellar.js, чтобы назвать несколько), но не может заставить его работать. Есть ли простой способ сделать это с нуля?Горизонтальный параллакс на сенсорных устройствах

EDIT: Невозможно заставить Stellar.js работать. Это фрагмент: Я предполагаю, что Stellar находит объекты и перемещает их соответственно, так как отображаются два окна: none; в начале. И что они получают абсолютное позиционирование. Но они не двигаются. На этом этапе я просто хочу, чтобы они двигались. И какие шаги я должен предпринять, чтобы иметь этот эффект на iPad/планшете.

JQuery библиотеки:

<script src="js/jquery.stellar.min.js"></script> 
<!-- OWN JQUERY --> 
<script src="js/javascript.js"></script>

JQuery:

$('#parallaxElements').stellar({ 
    horizontalScrolling: true 
});

HTML:

<!-- PICTURES AND LAYERS --> 
<div id="content"> 
    <div id="parallaxElements"> 
     <div id="forgrund" class="frontdrop" data-stellar-ratio="2" style="background:tomato;width:200px;height:50px;"> 
     </div> 

     <div id="kullarna" class="middledrop" data-stellar-ratio="1" style="background:purple;width:200px;height:50px;"> 
     </div> 

     <div id="bg" class="backdrop" data-stellar-ratio="0.5" style="background:blue;width:200px;height:50px;"> 
     </div> 
    </div> 
</div>

CSS:

#content{ 
    position:relative; 
    width:1024px; 
    height:768px; 
    background-color:gray; 
    overflow:scroll; 
} 
#bg, #kullarna, #forgrund{ 
    width:2050px; 
    position:absolute; 
} 
#bg{ 
    height:768px; 
} 
#kullarna{ 
    z-index:10; 
} 
#forgrund{ 
    z-index:11; 
    height:600px; 
}

источник

2016-04-11 Yamada Akira

Нет простых методов, элементов или свойств CSS или JS, которые обеспечивают легкую реализацию параллаксинга. Все они полагаются на фиксацию фонового элемента в CSS и использование JS для регулирования перемещения слоев переднего плана в разных пропорциях с помощью действия прокрутки. Плагины часто - путь к сожалению. Если вы можете определить проблемы, возникающие при реализации одного из ваших вариантов плагинов, как скрипку, мы, вероятно, сможем помочь вам правильно работать. – Korgrue

Я обновил сообщение с кодом фрагмента. И как я сказал в EDIT-тексте. Я просто хочу, чтобы он двигался и знал, какие шаги мне нужно предпринять, чтобы заставить его работать на планшетах. –

Закончено с помощью этого плагина! http://robbiestewart.ca/wordpress/parallaxSwipe/parallax.html Он отлично работает! Он имеет как вертикальный параллакс, так и горизонтальный (горизонтально неправильно назван «parallaxVertical.js»).

источник

2016-04-14 00:36:09

Горизонтальный параллакс на сенсорных устройствах

ответ

Смежные вопросы