параллакс с делениями высоты 100%

В настоящее время я использую обратное растяжение (http://srobbin.com/jquery-plugins/backstretch/). ) с плавной прокруткой для привязки к разделам высотой 100% моего одностраничного веб-сайта. Я пытаюсь включить параллакс stellar.js (http://markdalgleish.com/projects/stellar.js/), но у меня возникают всевозможные проблемы. Есть ли простой способ заставить это работать со 100% высотой div? У меня есть 4 элемента div высотой 100%, и я хочу, чтобы они прокручивались с разной скоростью. В настоящее время я бегу звездным против окна.

HTML

<div class="main-container" data-stellar-ratio="0.5">
<div class="main-container2" data-stellar-ratio="2">
<div class="main-container3" data-stellar-ratio="0.5">
<div class="main-container4" data-stellar-ratio="2">

CSS

.main-container {
background-image:url(../images/footballfieldblur.jpg);
min-height:100%;
height:100%;
z-index:-100;
position:relative;

}
.main-container2 {
background-image:url(../images/orange3.png);
min-height:100%;
height:100%;
position:relative;

}
.main-container3 {
background-image:url(../images/lightbackground.jpg);
min-height:100%;
height:100%;
position:relative;

}
.main-container4 {
background-image:url(../images/gopherbackground.png);
min-height:100%;
height:100%;
position:relative;
}

Javascript (backstretch.js)

<script>
// You may also attach Backstretch to a block-level element

$(".main-container").backstretch("images/footballfieldblur.jpg");
$(".main-container2").backstretch("images/orange3.png");
$(".main-container3").backstretch("images/lightbackground.jpg");
$(".main-container4").backstretch("images/gopherbackground.png");
</script>

Параллакс (stellar.js)

$(document).ready(function() {
      $(window).stellar(); 
      horizontalScrolling:false 
    });
    </script>

jquery css parallax
person jfarr    schedule 16.05.2013    source источник
comment
У меня нет опыта работы с этим конкретным плагином, но у меня есть несколько вопросов к вам: используете ли вы функцию слайд-шоу плагина jQuery или просто добавляете фоновое изображение для покрытия областей (независимо от того, фоны или дивы)?   -  person Doug    schedule 16.05.2013
comment
Дуг. Я использую его для добавления фоновых изображений, чтобы покрыть области.   -  person jfarr    schedule 16.05.2013

Ответы (2)


arrow_upward
0
arrow_downward

Есть ли причина, по которой вы просто не используете прямой CSS?

Скрипт: http://jsfiddle.net/uzKFu/1/

В принципе, поддержка background-size в наши дни довольно хороша.

Попробуйте изменить размер панели в скрипке, чтобы увидеть эффект.

person Doug    schedule 16.05.2013

arrow_upward
0
arrow_downward

Вы ошиблись, скопировав код? потому что js должен выдавать ошибку. Если вы используете firebug на инструменте разработчика ff или chrome, вы сможете увидеть ошибку в консоли. Я считаю, что «horizontalScrolling: false» принадлежит методу stellar() в качестве параметра конфигурации, подобного этому:

$(window).stellar({horizontalScrolling:false});

У меня нет опыта работы со stellar.js, поэтому я не могу точно сказать, что это решит вашу проблему.

person Foysal Ahamed    schedule 16.05.2013