Горизонтальный parallax scrolling в div

@RodionZ · Регистрация: 24.07.2015

Студворк — интернет-сервис помощи студентам

Подскажите пожалуйста, как исправить js. В общем делаю горизонтальный сайт. Подключил jquery.parallax.min.js чтобы при прокрутке сайта вправо, некоторые элементы двигались с разной скорость, для примера поставил облака, всё работает, но работает когда я прокручиваю вправо весь сайт (скролл 2 на картинке), а мне надо подключить к диву, который находится в body, класс у дива называется middle (скролл 1 на картинке).

Вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
 
<div class="middle">
        <div class="fon">
            <div class="bg1"></div>
            <div class="bg2"></div>
        </div>
</div>
<script type="text/javascript">
        $('.bg1').parallax({ speed: 0.2, axis: 'x' });
        $('.bg2').parallax({ speed: 0.5, axis: 'x' });
</script>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.bg1 {
    background-image:url(../images/bg1.png);
    width:7000px;
    height:1000px;
    top: 0;
    left: 0;
    position:fixed;
    overflow-y: hidden;
    z-index:5;
}
.bg2 {
    background-image:url(../images/bg2.png);
    width:5000px;
    height:1000px;
    top: 0;
    left: 0;
    position:fixed;
    overflow-y: hidden;
    z-index:10;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function (a) {
    a.fn.parallax = function (b) {
        var c = a.extend({}, a.fn.parallax.defaults, b);
        return this.each(function () {
            var b = a(this), d = c.axis === "x", e = (b.css("background-position") || "").split(" "), f = b.css("background-position-x") || e[0], g = b.css("background-position-y") || e[1], h = function () {
                return -a(window)[d ? "scrollLeft" : "scrollTop"]()
            };
            b.css("background-attachment", "fixed").addClass("inview"), b.bind("inview", function (a, c) {
                b[c ? "addClass" : "removeClass"]("inview")
            }), a(window).bind("scroll", function () {
                if (!b.hasClass("inview"))return;
                var a = d ? h() * c.speed + "px" : f, e = d ? g : h() * c.speed + "px";
                b.css("background-position", a + " " + e)
            })
        })
    }, a.fn.parallax.defaults = {start: 0, stop: a(document).height(), speed: 1, axis: "x"}
})(jQuery)

@RodionZ · 31.07.2015, 15:01 **[ТС]**

Нет ни у кого идей?

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@RodionZ 0 / 0 / 0 Регистрация: 24.07.2015 Сообщений: 6
	31.07.2015, 15:01 [ТС]
	Нет ни у кого идей? 0