Stellar JS (параллакс плагин) проблема позиционирования

Я создаю сайт параллакса со звездным js, и у меня серьезные проблемы с позиционированием элементов внутри "слайда". все мои элементы идеально выровнены с данным CSS; однако, как только я добавляю атрибут "data-stellar-ratio" к изображениям, их положение полностью искажается. в смещении винта нет заметного рисунка, или я бы просто настроил css.

вот мой HTML

<body>
  <div id="scrollContainer">
    <div id="scroller">

        <section data-slide="1" class="slide" id="slide1" > <!-- Home Screen -->
            <img class="part" data-stellar-ratio="1.5"  src="images/vi.svg" alt="">
            <img class="part" data-stellar-ratio="2" src="images/nyl.svg" alt="">
            <img class="part" data-stellar-ratio="3"  src="images/vibe.svg" alt="">
            <img class="part" data-stellar-ratio="2.5"  src="images/whitaker.svg" alt="">
            <img class="part" data-stellar-ratio="1"  src="images/red.svg" alt="">
        </section> <!-- END Home -->

Каждый "section.slide" установлен на "position: относительный;" и дочерние изображения установлены на абсолют. Вот мой css

    #scroller
    {
    text-align: left;
    width: 960px;
    margin: 0 auto;
    padding:0;
    }
    section.slide { position:relative; width:960px; height: 728px;}
    .part { position:absolute; }

    section#slide1 {background: #f2f2f2; width:100%;}
    section#slide1 .part:first-child  { width:524px; left:-297px; top:715px; } /* vi */
    section#slide1 .part:nth-child(2) { width:780px; left:159px; top:1072px; /*bottom:-344px;*/} /* nyl */
    section#slide1 .part:nth-child(3) { width:395px; left:357px; top: 525px; /*bottom:203px;*/ } /*vibe*/
    section#slide1 .part:nth-child(4) { width:641px; left:599px; top: 590px; /*bottom:138px;*/ } /*whitaker*/
    section#slide1 .part:nth-child(5) { width:424px; left:28px; top: 842px; /*bottom:-114px;*/ } /*red*/

Кто-нибудь знает подходящее решение? Спасибо за любую помощь! Я был на этом в течение 3 часов, и не нашел никакого решения пробным путем, и при этом я не нашел одно онлайн.

Источник

1 ответ

Решение

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

$.stellar({
    horizontalScrolling:false
    // other options...
});
Источник
Другие вопросы по тегам