Простейший параллакс эффект всего в ~6 строчках кода

От автора: В то время, как я занимался оформлением недавней публикации, я почувствовал, что функционалу главного заголовка не хватает чуточку… эмм… параллакса. Прежде чем вы начнёте осуждать меня, я хочу сказать, что параллакс эффект иногда бывает крутым… иногда…ну очень нечасто.

Я не хотел импортировать огромную библиотеку, так что я немного повозился в CodePen, и вот что получилось:

Всего пара строчек кода и заголовок «падает» медленнее, чем остальное содержимое страницы. Анимированная векторная иллюстрация впечатлит вас ещё больше.

КАК ЭТО РАБОТАЕТ

Вдохновлённый некоторыми работами Дана Уилсона, я создаю такой эффект с помощью переменных CSS и JavaScript. Давайте разбнремся в этом коде.

const title = document.querySelector('h1.title');
const speed = 0.2; title.style.transform = 'translateY( calc( var(--scrollparallax) * 1px ) )'; window.addEventListener('scroll', function() { title.style.setProperty('--scrollparallax', (document.body.scrollTop || document.documentElement.scrollTop) * speed);
});

Добавьте в CSS .title { will-change: transform }, и это сделает оформление более красивым. Я очень доволен тем, что благодаря всего ~6 строчкам кода я смог добиться желаемого параллакс-эффекта. Мне удалось быстро справиться с прототипом.

ЗАЧЕМ ИСПОЛЬЗОВАТЬ ПОЛЬЗОВАТЕЛЬСКИЕ СВОЙСТВА CSS?

Хороший вопрос, но я не уверен, что смогу дать хороший ответ1. По-моему, в том, чтобы использовать единственную переменную и передать остальную работу CSS, есть что-то изящное. CSS также обладает некоторыми практическими преимуществами…

Ниже приведён следующий пример, где мы задаём единственное свойство —scroll-amount для document.body.

window.addEventListener('scroll', function() { document.body.style.setProperty( '--scroll-amount', (document.body.scrollTop || document.documentElement.scrollTop)
});

Все математические правила переданы в CSS выражению calc(), и мы колдуем уже со свойством —scroll-amount . Добавляя другую переменную —multiplier, изменяющую каждый элемент, мы получим очень аккуратные эффекты.

Мульти-эффект параллакса только для настольных устройств с помощью одной переменной в JavaScript

Бинго! Мне нравится это решение, потому что оно достаточно простое и я понимаю, что происходит под капотом. «Простое» значит, что я могу изменять, расширять и улучшать его2. Я обожаю находить самые простые решения для создания минимального желаемого эффекта.

Апдейт: Тайсон Матанич в Твиттере предложил идею использования requestAnimationFrame и кажется, таким способом можно получить лучшую производительность, добиваясь 60FPS в Edge, а счётчик Chrome FPS показывает >30FPS.

Источник: https://daverupert.com/

Редакция: Команда webformyself.