Сразу к делу. Я по большей части backend-разработчик, но выдалась задачка реализовать на сайте ленту с эффектом параллакса при прокрутке. В голове мгновенно на автомате решение — npm, bower, google в помощь и погнали. И сразу все эти fremworks, библиотеки, настройки, внедрения и так далее. Блин, мне нужен простой эффект, больше ничего, я не хочу разбираться во всех этих мануалах, тонкостях frontend-дизайна, тащить кучу библиотек из-за такой ерунды.
Конечно, наверняка есть и адекватные решения, но за пару минут его не отыскать. Решено было реализовать самому. Через десяток минут была сделана тестовая страничка с двухслойным (если не считать внешнего статичного слоя с текстом) параллаксом на нужном блоке ленты. На выходе весь эффект параллакса занял две строки js — кода, завернутых в функцию, не считая верстки и css (на самом деле и того до смеха мало нужно):
Вызываем данную функцию в обработчике события onscroll документа. Передаем в нее элемент блока, фон которого будет является динамическим слоем (движется при прокрутке страницы) для реализации эффекта параллакса, а также настройку интенсивности движения. В примере задействовано два динамических слоя (1 — сплошная фоновая картинка, 2 — картинка с прозрачным фоном). Неподвижный текст сделан третьим внешним слоем. Количество промежуточных слоев с прозрачным фоном можно добавить сколько угодно.
Мои выводы. Велосипеды, конечно, изобретать не рекомендуется, но когда есть выбор написать две строчки кода или найти, скачать, подключить в проект библиотеку, да еще с зависимостями, разобраться как ее использовать ради такой ерунды, то я выбираю велосипед.
Исходный код всей странички можно забрать тут: github.com/Custom-IT/Parallax
Конечно, наверняка есть и адекватные решения, но за пару минут его не отыскать. Решено было реализовать самому. Через десяток минут была сделана тестовая страничка с двухслойным (если не считать внешнего статичного слоя с текстом) параллаксом на нужном блоке ленты. На выходе весь эффект параллакса занял две строки js — кода, завернутых в функцию, не считая верстки и css (на самом деле и того до смеха мало нужно):
function parallaxEffect(element, intency) {
let calcPositionY = window.pageYOffset * 100 / intency;
element.style.backgroundPositionY = calcPositionY + "%";
}Вызываем данную функцию в обработчике события onscroll документа. Передаем в нее элемент блока, фон которого будет является динамическим слоем (движется при прокрутке страницы) для реализации эффекта параллакса, а также настройку интенсивности движения. В примере задействовано два динамических слоя (1 — сплошная фоновая картинка, 2 — картинка с прозрачным фоном). Неподвижный текст сделан третьим внешним слоем. Количество промежуточных слоев с прозрачным фоном можно добавить сколько угодно.
Мои выводы. Велосипеды, конечно, изобретать не рекомендуется, но когда есть выбор написать две строчки кода или найти, скачать, подключить в проект библиотеку, да еще с зависимостями, разобраться как ее использовать ради такой ерунды, то я выбираю велосипед.
Исходный код всей странички можно забрать тут: github.com/Custom-IT/Parallax