Многонаправленное и множественное изображение, параллаксная прокрутка

Я создаю веб-сайт, который имеет «настольный» дизайн, другими словами, одну страницу с раздельными страницами, разбросанными по всей странице.

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

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

Я был в этом слишком долго, и теперь я должен использовать вас, ГЕНИЕЙ ИНТЕРНЕТА, чтобы спасти меня!


javascript scroll jquery parallax jquery-animate
person user831496    schedule 06.07.2011    source источник
comment
Не могли бы вы опубликовать урезанный HTML-код, чтобы дать нам представление о том, как устроена страница?   -  person thesonglessbird    schedule 06.07.2011

Ответы (1)


arrow_upward
0
arrow_downward

прокрутка параллакса довольно проста, плагин не нужен, хотя вы можете легко прикрепить его к $.fn, чтобы сделать его плагином jQuery:

<img src="foo.jpg" id="parallax1" class="parallax">

<style>
.parallax {
    position : fixed;
    top      : 0px;
    left     : 0px;
}
</style>

<script>
var scroller = $('#parallax1');
$(window).bind('scroll', function(){
   var top = this.scrollTop;
   $('#parallax1').css('top', top * someMultiplier);
});
</script>
person Mark Kahn    schedule 06.07.2011