Как создать расширяемую директиву параллакс эффекта для Vue
В своей работе я столкнулся со случаем, когда нужно было рефакторить код. А именно нужно было избавиться от ненужных библиотек. Одной из таких была библиотека создающая параллакс эффекты при скроллинге страницы.
Эта библиотека использовалась на многих страницах и по разному. Но она была плоха в адаптивности, а также и ее сложно было бы поддерживать или расширять. Например она не поддерживала 3d трансформации и для единственного элемента на сайте, требующего этого — была установлена еще одна библиотека.
Поэтому, было решено написать свою директиву, которая заменит обе библиотеки и позволит избавиться от двух зависимостей сразу. С возможностью самим расширять функционал, а также использовать в Vue 3.
Реализация решения по умолчанию
Основной функционал, который включается по умолчанию без опций это работа с двух колоночными карточками,с несколькими из них внутри. Важным моментом является, что одна из колонок должна быть по высоте больше соседней. Например как тут:
Вам нужно повторить подобную верстку, используя FlexBox или Grid CSS. И колонке, которая должна подстраиваться при скролле под высоту соседней колонки задать align-seft: flex-start. Это необходимо, чтобы правильно высчитывались пиксели, на которые должна сдвигаться колонка при скролле.
В таком случае, разметка выглядит следующим образом:
При использовании директивы по умолчанию, вам всего лишь нужно импортировать файл mad-parallax.js в компонент и использовать на той колонке, которая должна двигаться.
Реализация решения с кастомными параметрами
Решения работающие по умолчанию могут сильно упростить жизнь, но в некоторых случаях они могут не подойти. Поэтому помимо решения, в котором все работает по умолчанию, у вас есть возможность задавать кастомые параметры сдвига элементов при скроллинге. Например как здесь:
Чтобы получить такой эффект, необходимо задать нужные опции тем карточкам, которые должны двигаться. Например у нас должны двигаться вторая и третья карточки. Нам нужно задавать следующие опции:
У первой карточки мы отключаем параллакс. Очевидно, что единицами измерения внутри параметров являются пиксели. У второй карточки задаем maxMove: 20.Третьей карточки maxMove: 40. Тем самым при скролле у нас карточки будут появлятся друг за другом.
Исходный код компонента:
Вывод
Прелесть использования директивы с опциями, это то что мы можем анимировать любые элементы на странице. Карточки, картинки, или хоть просто заголовок, задавая тот сдвиг, который нам нужен.
Также, можно расширять директиву, добавляя в нее нужные функции или с легкостью переехать на Vue 3.
Можете наглядно посмотреть на реализацию здесь, исходный код c документацией к директиве можно найти на GitHub.
