Будьте проще. Иногда стоит написать велосипед

Сразу к делу. Я по большей части backend-разработчик, но выдалась задачка реализовать на сайте ленту с эффектом параллакса при прокрутке. В голове мгновенно на автомате решение — npm, bower, google в помощь и погнали. И сразу все эти fremworks, библиотеки, настройки, внедрения и так далее. Блин, мне нужен простой эффект, больше ничего, я не хочу разбираться во всех этих мануалах, тонкостях frontend-дизайна, тащить кучу библиотек из-за такой ерунды.

Конечно, наверняка есть и адекватные решения, но за пару минут его не отыскать. Решено было реализовать самому. Через десяток минут была сделана тестовая страничка с двухслойным (если не считать внешнего статичного слоя с текстом) параллаксом на нужном блоке ленты. На выходе весь эффект параллакса занял две строки js — кода, завернутых в функцию, не считая верстки и css (на самом деле и того до смеха мало нужно):

function parallaxEffect(element, intency) {
    let calcPositionY = window.pageYOffset * 100 / intency;
    element.style.backgroundPositionY = calcPositionY + "%";
}

Вызываем данную функцию в обработчике события onscroll документа. Передаем в нее элемент блока, фон которого будет является динамическим слоем (движется при прокрутке страницы) для реализации эффекта параллакса, а также настройку интенсивности движения. В примере задействовано два динамических слоя (1 — сплошная фоновая картинка, 2 — картинка с прозрачным фоном). Неподвижный текст сделан третьим внешним слоем. Количество промежуточных слоев с прозрачным фоном можно добавить сколько угодно.

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

Исходный код всей странички можно забрать тут: github.com/Custom-IT/Parallax
Метки:
javascript, parallax effect, simple coding