Создавая что-то в Red Antler, мы, как правило, придерживаемся принципа «меньше значит больше». Я большой поклонник Vanilla JS и еще больший поклонник того, чтобы CSS выполнял как можно больше тяжелой работы. Поэтому, подходя к ситуациям с параллаксом, я всегда стараюсь использовать самый простой подход с точки зрения «что нам действительно нужно делать?»
Раньше я был поклонником таких вещей, как skrollr, но не видел необходимости добавлять всю библиотеку. Я нашел несколько ванильных подходов, но, опять же, всегда происходило гораздо больше, чем нам было нужно. Чтобы построить параллакс в Olapic, мне потребовалось всего 2 вещи: элемент DOM для перемещения и установить, насколько я хочу сместить этот элемент на основе прокрутки. Я не большой поклонник чрезмерного прокрутки, поэтому я никогда не забираю всю страницу, вместо этого мне нравится контролировать положение прокрутки как можно более пассивно.
Приведенный выше код на самом деле не выполняет никакого прослушивания прокрутки, это просто код, в который вы передаете свои параметры. В зависимости от сложности прокрутки / интенсивности / скорости отклика прокрутки вы можете настроить регулировку положения прокрутки по своему усмотрению. Ниже я привел пример, в котором нет дросселирования.
В приведенном выше коде у нас есть init (), который принимает элемент DOM, а также значение смещения, которое мы затем применяем преобразование css через javascript el.style.transform .
Что касается того, как мы вызываем Parallax.init (), вы можете использовать его как угодно. В моем конкретном случае особого регулирования не потребовалось, потому что он был достаточно эффективным с тем, как я с ним справлялся. В противном случае я мог бы порекомендовать добавить небольшую задержку, чтобы не перерисовывать чрезмерно. Даже с такой небольшой задержкой, как задержка в 1–200 мс, повторная отрисовка может значительно повлиять на производительность.
Функция handleScrolling содержит все наши вызовы Parallax.init ():
И это все! На вашем сайте есть плавный и недорогой расширяемый параллакс. Математика может / должна быть изменена для любой ситуации, которую вы пытаетесь достичь, но это должно быть действительно хорошей отправной точкой для выполнения некоторого базового параллакса.
В качестве дополнительного бонуса вы можете добавить легкости анимируемым элементам (в CSS):
Наслаждаться.
А для рабочего примера перейдите на Olapic. Приведенный выше код - это то, что обеспечивает параллакс на главной странице.
Я сделал для этого небольшой пакет npm и буду вносить в него изменения, не стесняйтесь открывать проблемы / задавать вопросы здесь:
